jQuery动画

一、jquery中的动画

1、标准动画

• show()
• hide()
• toggle()

2、折叠动画

• slideDown()
• slideUp()
• slideToggle()

3、渐显动画

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

4、综合动画

• animate

5、停止动画

• stop
• finish

二、标准动画

1、show()

show() 显示隐藏的匹配元素

如果这个元素是可见的，这个方法不会改变任何东西，无论这个元素是通过hide()方法隐藏的还是在css里面设置了display:none，这个方法都有效

语法：show(speed,easing,fn)

• speed：三种预定速度的字符串（slow,normal,fast）或者表示动画时长的毫秒数值（如：2000），Number/String
• easing：(optional 可选参数) 用来指定运动效果，默认是"swing"，可选参数"linear"，String
• fn：(optional 可选参数) 在动画完成时执行的函数，每个元素执行一次， Function

三种预定速度的字符串对应的毫秒数值

slow	normal	fast
600	400	200

例：让隐藏的div用2秒时间匀速显示出来，完成之后执行一个反馈

$('div').show(2000,"linear",function(){
      $(this).html("动画完成")
 })

2、hide()

hide() 隐藏显示的元素

如果元素是隐藏的，这个方法不会改变任何东西。隐藏的元素相当于设置了display: none，隐藏且不占位

语法：hide(speed,easing,fn)

例：让隐藏的div用2s时间匀速隐藏

$('div').hide(2000,"linear");

3、toggle()

toggle() 切换

如果元素是隐藏的，切换为可见，如果元素是可见的，切换为隐藏

语法：toggle(speed,easing,fn)

三、折叠动画

1、slideDown()

slideDown() 通过高度变化（向下增大）来动态显示匹配的所有元素，在动画完成后可选地触发一个回调函数

语法：slideDown(speed,easing,fn)

2、slideUp()

slideUp() 通过高度变化（向上减小）来动态隐藏匹配的所有元素，在动画完成后可选地触发一个回调函数

语法： slideUp(speed,easing,fn)

3、slideToggle()

slideToggle() 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数

语法：slideToggle(speed,easing,fn)

四、渐显动画

1、fadeIn()

fadeIn() 通过透明度的变化实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的透明度，也就是说所有匹配元素的宽度和高度不会发生变化

语法：fadeIn(speed,easing,fn)

2、fadeOut()

fadeOut() 通过透明度的变化实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的透明度，也就是说所有匹配元素的宽度和高度不会发生变化

语法：fadeOut(speed,easing,fn)

3、fadeToggle()

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

这个动画只调整元素的透明度，也就是说所有匹配元素的宽度和高度不会发生变化

语法：fadeToggle(speed,easing,fn)

4、fadeTo()

fadeTo() 将所有匹配元素的透明度以渐进方式调整到指定的透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的透明度，也就是说所有匹配元素的宽度和高度不会发生变化

语法：fadeTo(speed,opacity,easing,fn)

• opacity:一个0-1之间表示透明度的数字 Number类型

五、综合动画

animate() 用于创建自定义动画的函数

1. 这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用驼峰式形式，比如用marginLeft代替margin-left.

2. 而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

3. 在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 “+=” 或 “-=” 来让元素做相对运动。

4. jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如(“user-select”, “none”); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".

语法：animate(params,speed,easing,fn)

• params 一组包含作为动画属性和终值的样式属性和及其值的集合，Object类型

例1：点击按钮后div元素的几个不同属性一同变化

    $('button').click(function(e){
      $('div').animate({
        width: "50px",
        height: "50px",
        marginLeft: "300px"  
      },2000,"linear")
    })

例2：可以设置css属性的值为’show’/‘hide’/‘toggle’，来实现对应属性的显示/隐藏/切换效果

 $('button').click(function(e){
      $('div').animate({
        width: "toggle",
        opacity: "toggle"
      },2000,"linear")
    })

六、停止动画

1、stop()

stop() 停止所有在指定元素上正在运行的动画

运动到哪个位置就停止在哪个位置

2、finish()

finish() 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

当 .finish()触发时，立即停止正在进行的动画，不管此时运动的位置，瞬间到达运动完成的位置

七、延时函数

delay(duration) 设置一个延时来推迟执行队列中之后的项目。

• duration 延迟时间，单位毫秒，整数型

例：在.slideUp() 和 .fadeIn()之间延时800毫秒

 $('button').click(function(e){
      $('div').slideUp(1000).delay(1000).fadeIn(1000)
 })