jQuery动画

jQuery任何动画都能指定3种速度参数"slow","normal","fast"(时间分别是0.6s  0.4s  0.2s)，使用该3参数时必须加引号。另外还可以使用数字作为时间参数，例如show(1000)。

1、show()和hide()方法

　　show()方法 最后将元素的display属性设置为block。

　　hide()方法 最后将元素的display属性设置为none。

　　如果不给参数，就是直接将元素隐藏或显示，不会有任何动画。

　　如果给这2个方法设置参数  会出现一个宽度、高度和透明度分别同时改变的动画效果。

2、fadeIn()和fadeOut()方法 只改变透明度的动画效果

　　fadeIn()方法  元素的opacity从0到1直到显示的动画过程。

　　fadeOut()方法 元素的opacity从1到0直到完全消失的动画过程。

3、slideUp()和slideDown()方法 通过改变高度实现动画效果

　　slideDown() 从上到下过渡显示

　　slideUp() 从下到上过渡隐藏

4、animate() 自定义动画

　　animate(params, speed, callback);  可以用animate()方法来操作几乎所有的css属性。但是属性名要使用驼峰写法比如fontSize而不是连字符"-"，另外色彩动画不包含在jquery核心库中

　　params一个包含样式属性和值的映射 {"property1":"value1", "property2:"value2", "propertyN":"valueN"}。

　　speed 效果的时长。

　　callback 动画完成之后的回调函数。

　　当一个元素上应用多个属性时，动画是同时进行的 ；当同时编写多个animate()调用，jQuery会创建包含这些调用的队列，然后逐一运行这些调用。

　　使用animate()方法过程中可能由于操作过快，导致动画衔接脱节，一般会加一个stop()方法比如$("element").stop().animate();

　　如果想对动画进行延迟操作，提供了一个delay()方法  $("element").delay(1000).animate();

5、stop()停止动画

　　stop([clearQueue] [gotoEnd]) 两个参数都是可选的，都为Boolean值(true 或 false)。

　　clearQueue: 清除当前队列动画。

　　gotoEnd: 将正在执行的动画跳转到末尾状态。

6、如果判断页面上元素是否处于动画状态呢 if($("element").is(":animated")) { };

 

注: callback回调函数适用于jQuery所有动画方法。