jQuery 动画
-
jQuery效果 - 动画
使用jQuery,您可以创建自定义动画。jQuery -
jQuery animate() 方法
jQuery animate()方法用于创建自定义动画。语法:$(selector).animate({params},speed,callback);必选的params参数定义要设置动画的CSS属性。可选的speed参数指定效果的持续时间。 它可以采用以下值:"slow", "fast"或者毫秒。可选的回调参数是动画完成后要执行的函数。注意:默认情况下,所有HTML元素都具有静态位置,并且无法移动。要操纵位置,请记住首先将元素的CSS position属性设置为relative,fixed或absolute!
以下示例演示了animate()方法的简单用法; 它将<div>元素向右移动,直到它达到250px的left属性: -
jQuery animate() 操作多个属性
是否可以使用animate()方法操作所有CSS属性?是的,差不多! 但是,有一件重要的事情需要记住:当与animate()方法一起使用时,所有属性名称必须是驼峰式的:您需要编写paddingLeft而不是padding-left,marginRight而不是margin-right,依此类推。此外,核心jQuery库中不包含颜色动画。如果要为颜色设置动画,则需要从jQuery.com下载Color Animations插件。以下示例演示了animate()可以同时为多个属性设置动画: -
-
-
jQuery animate() 使用队列功能
默认情况下,jQuery带有动画的队列功能。这意味着如果你在彼此之后编写多个animate()调用,jQuery会使用这些方法调用创建一个“内部”队列。 然后它运行动画调用ONE by ONE。因此,如果您想要在彼此之后执行不同的动画,我们将利用队列功能:下面的示例首先将<div>元素向右移动,然后增加文本的字体大小:有关所有jQuery效果的完整概述,请转到我们的jQuery效果参考手册。