jQuery动画效果总结

 
更多

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”)

打赏

本文固定链接: https://www.cxy163.net/archives/3843 | 绝缘体

该日志由 绝缘体.. 于 2014年03月24日 发表在 未分类 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: jQuery动画效果总结 | 绝缘体
关键字: , , , ,

jQuery动画效果总结:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter