动画
显示与隐藏
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,动画队列。…