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,动画队列。…