使用jQuery怎么实现动画(jquery,web开发)

显示与隐藏

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

speed : 三种预定速度之一的字符串 (“slow”、“normal”或者“fast”) 或表示动画时长的毫秒数值。

easing : 用来指定切换效果，默认是 “swing”，可用参数 “linear ”。

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

滑动式动画

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

speed : 三种预定速度之一的字符串 (“slow”、“normal”或者“fast”) 或表示动画时长的毫秒数值。

easing : 用来指定切换效果，默认是“swing”，可用参数“linear ”。

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

淡入淡出效果

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

speed : 三种预定速度之一的字符串 (“slow”、“normal”或者“fast”) 或表示动画时长的毫秒数值。

easing : 用来指定切换效果，默认是“swing”，可用参数“linear ”。

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

动画切换效果

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

toggle ([speed], [easing] [, fn] )方法 : 如果元素是可见的，切换为隐藏的;如果元素是隐藏的，切换为可见的。

slideToggle([speed], [easing] [, fn]) 方法 : 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

fadeToggle([speed], [easing] [, fn]) 方法 : 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

具有局限性

animate()方法

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

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

duration : 一个字符串或者数字决定动画将运行多久。

easing : 一个字符串，表示过渡使用哪种缓动函数。

cormplete : 在动画完成时执行的回调函数。

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

backgroundColor

borderBottonColor.

borderLeftColor

borderRightColor

borderTopColor

Color

outlineColor

并发与排队效果

并发效果 : 指的就是多个动画效果同时执行。

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

queue : 用于控制当前的动画效果是并发还是排队效果:

停止动画效果

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

clearQueue : 如果设置成 true，则清空队列。可以立即结束动画。

gotoEnd : 让当前正在执行的动画立即完成，并且重设 show 和 hide 的原始样式，调用回调函数等

延迟执行动画

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

duration : 延时时间，单位为毫秒。

queueName : 队列名词，默认是Ex，动画队列。