jQuery动画:
jQuery.show()和jQuery.hide()
a.不传参数,没有动画效果,show():直接显示 hide():直接隐藏,比较常用
b.show(speed)和hide(speed)
speed:动画的持续时间 ,可以是毫秒值 ,还可以是固定字符串
fast:200ms normal:400ms slow:600ms
c.show([speed], [callback])和hide([speed],[ callback])
[ ]中括号表示可选择参数,并非表示数组
callback: 回调函数- 滑入滑出动画
jQuery.slideDown()
滑入动画:从上往下显示
jQuery.slideUp()
滑出动画:从下往上隐藏
jQuery.slideToggle()
如果是滑入状态,就执行滑出的动画,如果是滑出状态,则不操作
用法和jQuery.show()和jQuery.hide()
用法一样,
不同是如果不传speed参数,默认为normal - 淡入淡出动画
jQuery.fadeIn()
淡入动画
jQuery.fadeOut()
淡出动画
jQuery.fadeToggle()
如果是淡入状态,就执行淡出动画,如果为淡出状态,则不操作
用法和jQuery.show()和jQuery.hide()
用法一样,
不同是如果不传speed参数,默认为normal - 自定义动画
jQuery.animate(json,speed,easing, callback);
a.第一个参数 json:对象,里面可以传需要动画的样式
b. 第二个参数 speed:speed 动画的执行时间,有一个默认normal
c.第三个参数 easing:动画的执行效果
linear:线性 匀速 swing:秋千 摇摆 等
默认为swing
d.第四个参数 callback:回调函数
- 动画深入理解
jQuery
中对同一个对象作多组动画,jQuery
会把它们储存在一个动画队列中
$("div").animate({left:800})
.animate({top:400})
.animate({width:300,height:300})
.animate({top:0})
.animate({left:0})
.animate({width:100,height:100})
}
jQuery.stop(clearQueue,jumpToEnd)
用于停止动画
stop()
:停止当前正在执行的动画
clearQueue
:是否清除动画队列,值为 true/false,默认为false
jumpToEnd
:是否跳转到当前动画的最终效果 ,值为true/false,默认为false
通常用法:.stop().animate();