jquery的动画效果animate附加一个滚动回到页面的例子

来源：互联网发布：大数据涂子沛简介编辑：程序博客网时间：2024/06/03 13:06

动画给人带来不错的视觉效果，jquery中的animate()方法让那个页面增加了很好的视觉效果

show() and hidden()：根据词的意思不难理解，就是显示与隐藏

这两个方法的含义其实与css中的display效果一样，在css中我们将某些元素隐藏起来，$("element").css（“display”，“none”），这个个属性的设置可以换成$("element").hidden();相应的show()与display:block一样效果，这样减少了代码量。如果在调用的时候出现一些动画效果，那么就为这两个方法设置一下速度参数。$("element").show("slow");“slow”相当于是600毫秒，也就是在600毫秒内元素将慢慢的显示出来，里面的参数可以自己设定。

fadeIn与fadeOut：设置元素的透明度，fadeOut是改变元素的透明度来是元素消失，fadeIn相反

html:

<h5 class="body">下面插播一条新闻，在东部地区发现了。。。。。。</h5>

jquery:

$(document).ready(function() {

$("#panel h5.head").toggle(function(){

$(this).next().fadeOut(); //淡出效果
},function(){
$(this).next().fadeIn(); //淡入效果
});
});

slideUp与slideDown:设置元素的高度，slidDown是有上至下显示延伸显示，slidUp是有下至上缩短显示

jquery:将上面的jquery元素更改为：

$(document).ready(function() {

$("#panel h5.head").toggle(function(){

$(this).next().slideDown("slow");
},function(){
$(this).next().slideUp("slow");
});
});

slidToggle与fadeToggle这两个方法是对slideUp与slideDown、fadeIn与fadeOut两者之间的切换。

自定义动画animate()

语法结构animate(param,speed,callback)
param:是一个样式属性及值得映射，比如{property：“value1”，property：“valu21”。。。。。}
speed:速度参数，可选
callback:在完成动画时执行的函数，可选
引用上边的元素，给h5添加动画效果
$("#panel h5.head").click(){
$(this).animate(left:"100px",500);
} 将元素在0.5秒向右移动100像素

动画的累加，将上面的语句改为

$("#panel h5.head").click(){
$(this).animate(left:"+=200px",500);
}
在当前位置累加200像素
前面讲过param的参数可以有多个，所以代码再次修改为
$("#panel h5.head").click(){
$(this).animate({left:"+=200px",height:"100px"}，500);
}
这样一来元素既可以移动也可以变高了
动画的回调就是将动画执行完成以后发出的一个动作，在上面的基础可以这样改
$("#panel h5.head").click(){
$(this).animate({left:"+=200px",height:"100px"}，500，function（）{
$(this),css("color","pink");
});
} 执行完动画后将字体颜色改变

停止动画

停止动画stop()

语法：stop([clearQueue],[gotoEnd])两个参数都是可选的，为Boolean值，clearQueue代表是否要清空未执行完的动画，gotoEnd代表是否直接将正在运行的动画跳转到末状态，如果直接使用stop()方法，则会立即停止当前的动画。
html: 定义一个块
<div id="block"> </div>
css:

<style type="text/css">
#block{
position:relative;
width:100px;
height:100px;
border:2px solid #0050D0;
background:#969696;
cursor:pointer;}
</style>

jquery:
$(document).ready(function(){

$("#block").click(function(){
$(this).animate({left:"+=100px",width:"+=100px",opacity:"0.5"},600)
.animate({top:"200px",width:"160px"},1000,function(){
$(this).css({border:"4px solid red",opacity:"1"});
});
});

$("#block").hover(function(){
$(this).stop(true,true)
.animate({width:"+=100px"},600)
.animate({height:"+=100px"},600);
},function(){
$(this).stop(true,true)
.animate({width:"60px"},600)
.animate({height:"30px"},600);
});

});

下面的例子是通过anminate()方法滚动回到页面顶部

创建一个页面，body部分，下面有好多↓就是i为了能让页面出滚动条，着实有些浪费

<div id="pagewrap">
↓ scroll down
↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓
/**滚动部分**/

<a href="#top">Back to Top</a>

</div>

</body>

css部分：接触的css不多，里面有些属性自己也是查过资料才略懂的，这里就啰嗦一下。为了是回到顶部的按钮位置不变，需要将back to top位置position为成fixed，border-radius属性是将背景添加圆角边框，text-transform设置文本的大小写，transition是属性改变时，变换的效果时间的延迟。友情提示：如果有幸能用到该例子，请注意下面绿色的部分，此处是添加一个背景图片，这里自己要找一张图片添加自己的路径，要不然。。。。你懂得

<style>

body {
margin: 30px auto;
}
#pagewrap {
margin: 0 auto;
width: 600px;
padding-left: 150px;
position: relative;
}
/*Back to top button */
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
text-transform: uppercase;
text-decoration: none;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(up-arrow.png) no-repeat center center;
border-radius: 15px;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
</style>

jquery部分：通过滚动条的位置来设置back to top按钮的显示，以及返回顶部的操作。

头部引入的文件：<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
$(document).ready(function() {
$("#back-top").hide();
$(window).scroll(function() {
if($(window).scrollTop()>100){
$("#back-top").show();
}
else {

$("#back-top").hide();
}
});

$("#back-top").click(function(){
//$(window).scrollTop(0);
//$(document).animate({scrollTop:0},1000);
$("body,html").animate({scrollTop:0},1000);
$("#back-top").hide();
return false;
});
});
</script>

0 0