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.feishuai.vip
则会先执行第一个animate,再执行回调中的css(,最后执行第二个animate(;
停止动画
stop(clearQueue, gotoEnd; //参数可选
clearQueue //停止动画后是否清除剩余的队列
gotoEnd //停止动画后是否直接到动画最后
为了避免动画累积,还可判断是否正在进行动画中,如下:
$(this.is(":animated"