jQuery动画的几种方法

动画

显示与隐藏

show()方法和hide()方法是jQuery中最基本的动画方法，具体语法如下：

$element.show([speed],[easing],[fn]);
$element.hide([speed],[easing],[fn]);

• speed:三种预定速度之一的字符串（"show","normal"或者"fast")或表示动画数值。
• easing:用来指定切换效果，默认是"swing",可用参数"inear".
• fn:在动画完成时执行的函数，每个元素执行一次。

滑动式动画

slidUp()和slideDown()方法通过改变高度值实现动画效果。具体语法如下：

$element.slidUp([speed],[easing],[fn]);
$element.slideDown([speed],[easing],[fn]);

• speed:三种预定速度之一的字符串（"show","normal"或者"fast")或表示动画数值。

• easing:用来指定切换效果，默认是"swing",可用参数·"inear".

• fn:在动画完成时执行的函数，每个元素执行一次。

淡入淡出效果

fadeln()和``fadeOut()方法通过改变透明度实现动画效果。具体语法如下：

$element.slidUp([speed],[easing],[fn]);
$element.slideDown([speed],[easing],[fn]);

• speed:三种预定速度之一的字符串（"show","normal"或者"fast")或表示动画时长的毫秒数值。

• easing:用来指定切换效果，默认是"swing",可用参数"inear".

• fn:在动画完成时执行的函数，每个元素执行一次。

动画切换效果

jQuery除了提供了三种预定义动画效果之外，还提供三组动画切换效果:

• toggle``([speed][, easing][, fn])方法:如果元素是可见的，切换为隐藏的;如果元素是隐藏的，切换为可见的。
• slideToggle([speed][, easing][, fn])方法:通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
• fadeToggle([speed][, easing][, fn)方法:通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

aninate()方法

jQuery提供了animate()方法完成自定义动画效果，该方法具有两种用法:

$element.animate(properties,duration,easing,complete)

● properties: -个CSS属性和值的对象，,动画将根据这组对象移动。

• duration: -个字符串或者数字决定动画将运行多久。
• ``easing:-个字符串， 表示过渡使用哪种缓动函数。
• complete: 在动画完成时执行的回调函数。

并发与排队效果

• 并发效果：值得就是多个动画效果同时执行。

$("#panel").click(function(){
        $(this).animate({
                  left:"500px",
                  height:"200px"
        },3000);
});

• 排队效果：指的就是多个动画按照先后顺序执行。

$("#panel").click(function(){
        $(this).animate({left:"500px"},3000)
                  .animate({height:"200px"},3000);
});

animate()方法

通过animate()方法实现动画效果，但不支持以下CSS样式属性:

• backgroundColor

• borderBottomColor

• borderLeftColor

• borderRightColor

• borderTopColor

• Color

• outlineColor

停止动画效果

jQuery提供了stop()方法用于停止所有在指定元素上正在运行的动画，具体语法如下:

$element.animate(clearQueue][, gotoEnd]);

● clearQueue: 如果设置成true,则清空队列。可以立即结束动画。
● gotoEnd: 让当前正在执行的动画立即完成，井且重设show和hide的原始样式，调用回调函数等。

延迟执行动画

jQuery提供了delay()方法用于设置一个延时来推迟执行队列中之后的项目 ，具体语法如下:

$element.delay(duration[, queueName]);

● duration: 延时时间，单位为毫秒。
● queueName: 队列名词，默认是Ex,动画队列。…