jQuery自定义动画animate()

jQuery中的show()方法和hide()方法会同时修改元素的多个样式，即宽度、高度和不透明度；fadeOut()方法和fadeIn()方法只会修改元素的不透明度；slideDown()方法和slideUp()方法只会修改原色的高度。这些有时候根部满足不了需求，所以就要采取一些高级的自定义动画，在jQuery中可以使用animate()方法来自定义动画；

（注：本文默认已使用jquery-1.7.1.js库！！）

 

animate()

语法 ：

animate(params,speed,callback);

参数：  ①params：一个包含样式属性及值的映射，比如{property1 : "value1",property2 : "value2",........}；

              ②speed：速度参数，可选参数；

              ③callback：在动画完成时执行的函数，可选；

 

如下例让div动起来：

<script type = "text/javascript" >
    $( function () {
        $( "#panel").click( function () {
        //三种动画同时进行
        //$(this).animate({ left: "+=500px",height:"+=500px",width:"+=500px"}, 2000);
        //三种动画顺序执行
        $( this).animate({ left : "+=500px"}, 50);
        $( this).animate({ height : "+=500px"}, 50);
        $( this).animate({ width : "+=500px" }, 50);
        });
    });
< /script >

 

链式方式（动画队列）：

<script type = "text/javascript" >
    $( function () {
        $( "#panel").css( "opacity", "0.5");
        $( "#panel").click( function () {
        $( this).animate({ left : "400px", height : "400px", opacity : "1" }, 2000)
            .animate({ top : "200px", width : "400px" }, 2000)
            .fadeOut( "slow");
        });
    });
< /script >

 

动画回调函数（callback）：

需要注意的是，css()方法不会加入到动画队列中个，而是立即执行。此时可以使用animate方法的最后一个参数callback；使用回调函数(callback)可以对非动画方法实现队列，只要将css()方法写在某个动画中的回调函数里即可！例如：

<script type = "text/javascript" >
    $( function () {
        $( "#panel").css( "opacity", "0.5");
        $( "#panel").click( function () {
            $( this).animate({ left : "400px", height : "400px", opacity : "1" }, 2000, function () { $( this).css( "border", "5px solid blue"); })
            .animate({ top : "200px", width : "400px" }, 2000, function () { $( this).css( "background-color", "Green"); })
        });
    });
< /script >

注意：callback回调函数适用于jQuery所有的动画效果方法！！

 

停止元素的动画：

    方法：stop([clearQueue],[gotoEnd]);

      参数：clearQueue：boolean值，表示是否要清空未执行完的动画队列；

             gotoEnd：代表是否直接将正在执行的动画跳转到末状态；

      这两个参数都是可选参数！！

 

判断元素是否处于动画状态：

    语法：             

if ( !$( "#panel").is( ":animated")) {
     //如果当前元素(id=panel)没有进行动画，则添加新的动画！
}

      

延迟动画：

    在动画执行的过程中，如果相对动画进行延迟操作，可使用delay()方法；用法如下：

<script type = "text/javascript" >
    $( function () {
        $( "#panel").css( "opacity", "0.5");
        $( "#panel").click( function () {
            $( this).animate({ left : "200px", height : "300px", opacity : "1" }, 2000, function () { $( this).css( "border", "5px solid blue"); })
            .delay( 2000)
            .animate({ top : "200px", width : "300px" }, 2000, function () { $( this).css( "background-color", "Green"); })
            .delay( 2000)
            .fadeOut( "slow");
        });
    });
< /script >

 

jQuery中的其他动画方法：

    ->toggle(speed,[callback]);

    ->slideToggle(speed,[easing],[callback]);

    ->fadeTo(speed,opacity,[callback]);

    ->fadeToggle(speed,[easing],[callback]);

 ①toggle()：

    toggle方法可以切换元素的可见状态，如果元素当前是可见的，则切换为隐藏的，如果是隐藏的，则切换为可见的；

 ②slideToggle():

    此方法通过高度变化来切换匹配元素的可见性；效果和toggle相同，不过这个动画是调整元素的高度来显示和隐藏元素的，相当于slideDown和slideUp；

 ③fadeTo()：

    此方法把元素的不透明度以渐进的方式调整到指定的值，值调整不透明度，元素的高度和宽度不变！

 ④fadeToggle()：

    通过不透明度变化来切换匹配元素的可见性，值调整不透明度，相当于fadeOut和fadeIn；

 

总结：

方法名	说明
hide(),show()	同时修改多个样式属性：高度、宽度、不透明度
fadeIn(),fadeOut()	只改变不透明度
slideUp(),slideDown()	只改变高度
fadeTo()	只改变不透明度
toggle()	用来代替hide方法和show方法，同hide，show方法
slideToggle()	用来代替slideUp和slideDown方法
fadeToggle()	用来代替fadeIn和fadeOut方法
animate()	自定义动画的方法，以上各种动画方法实质内部都调用了animate方法，此外，直接使用animate方法 还可以自定义其他样式属性。也就是说，可以用animate代替其他所有的动画方法；

 

通过 为知笔记 发布