show()和hide()
show()和hide()是jQuery中最基本的动画方法,该动画操作了display:none;
|
|
show()和hide()可以传入动画执行毫秒数或者传入“nomal", “slow”, “fast"关键字控制速度。
fadeIn()和fadeOut()
fadeIn()和fadeOut()只是改变透明度。
slideUp()和slideDown()
slideUp()和slideDown()只会改变元素的高度(由上到下展开, 由下到上收起)。
自定义动画animate()
|
|
参数说明: params: 一个包含样式属性和值的映射 speed:速度参数,可选 callback:动画完成时执行的函数,可选
|
|
累加,累减
如果将left:“500px"改为 left:"+=500px"含义就变成了在当前位置累加500px
多重动画
|
|
顺序执行多个动画
|
|
停止动画
|
|
参数clearQueue和gotoEnd都是可选参数,为boolean值,clearQueue代表是否要清空未执行完的动画队列,gotoEnd代表是否直接将正在执行的动画跳到末状态。如果直接用stop()则会立即停止当前动画,如果队列还有动画,则以当前状态继续执行下面的动画。
|
|
判断是否动画状态
|
|
延迟动画
在动画执行过程中,如果想对动画进行延迟操作,那么可以使用delay()方法,使用方式如下:
|
|
其他动画方法
除了上面的动画外,jQuery中还有4个专门用于交互的动画。
toggle()
toogle()方法可以切换元素的可见状态。
|
|
slideToggle()
通过改变高度来切换元素的可见状态。
fadeTo()
把元素的透明度通过渐进的方式调整到指定值,这个动画只调整元素的不透明度。
|
|
fadeToggle()
通过改变透明度来切换元素的可见状态。
动画方法概括
方法名 | 说明 |
---|---|
hide()和show() | 同时修改多个样式属性,即高度、宽度、不透明度 |
fadeIn()和fadeOut() | 只改变不透明度 |
slideUp()和slideDown() | 只改变高度 |
fadeTo() | 只改变不透明度 |
toggle() | 用了替代hide()和show()方法 |
slideToggle() | 用来替代slideUp()和slideDown() |
fadeToggle() | 用来替代fadeIn()和fadeOut |
animate() | 自定义动画,上面动画实质上都调用了animate() |