jQuery动画效果总结
浏览数：368 /
时间：2015年02月21日
jquery中有各种已经封装好的动画效果方法，清楚的了解这些动画效果能更简单快速的开发一些比较酷的效果，下面将jquery中比较常用的动画效果做一下简单的总结。
（1）show()和hide()
显示和隐藏，同时修改高度、宽度、以及不透明度。
（2）toggle()
控制显示或者隐藏，能很好的代替show()和hide()。
（3）fadeIn()和fadeOut()
只是改变不透明度。
（4）fadeTo()
只改变不透明度至某一值。
（5）slideUp()和slideDown()
只改变高度。
（6）slideToggle()
只改变高度，可替代slideUp()和slideDown()。
（7）animate(jsonObj, time, callBack)
例如：
animate({left:"50px"}, 300);
animate({left:"+=50px", 300});
animate({left:"+=50px", top:"50px"}, 300); //同时改变
animate({left:"+=50px"}, 300).animate({height:"+=50px", 340}); //队列改变
动画回调函数
除以上方法外，其他均不属于动画队列函数，在执行完动画后需要放在动画回调函数中执行，不然就会被立即执行。
animate({left:"+=50px", 300, function (){
$(this).css("background-color","red")
}}).animate(...);//www.phpernote.com
则会先执行第一个animate，再执行回调中的css()，最后执行第二个animate();
停止动画
stop(clearQueue, gotoEnd); //参数可选
clearQueue //停止动画后是否清除剩余的队列
gotoEnd //停止动画后是否直接到动画最后
为了避免动画累积，还可判断是否正在进行动画中，如下：
$(this).is(":animated")
（1）show()和hide()
显示和隐藏，同时修改高度、宽度、以及不透明度。
（2）toggle()
控制显示或者隐藏，能很好的代替show()和hide()。
（3）fadeIn()和fadeOut()
只是改变不透明度。
（4）fadeTo()
只改变不透明度至某一值。
（5）slideUp()和slideDown()
只改变高度。
（6）slideToggle()
只改变高度，可替代slideUp()和slideDown()。
（7）animate(jsonObj, time, callBack)
例如：
animate({left:"50px"}, 300);
animate({left:"+=50px", 300});
animate({left:"+=50px", top:"50px"}, 300); //同时改变
animate({left:"+=50px"}, 300).animate({height:"+=50px", 340}); //队列改变
动画回调函数
除以上方法外，其他均不属于动画队列函数，在执行完动画后需要放在动画回调函数中执行，不然就会被立即执行。
animate({left:"+=50px", 300, function (){
$(this).css("background-color","red")
}}).animate(...);//www.phpernote.com
则会先执行第一个animate，再执行回调中的css()，最后执行第二个animate();
停止动画
stop(clearQueue, gotoEnd); //参数可选
clearQueue //停止动画后是否清除剩余的队列
gotoEnd //停止动画后是否直接到动画最后
为了避免动画累积，还可判断是否正在进行动画中，如下：
$(this).is(":animated")
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
