jQuery中的动画

　　1.show()方法和hide()方法

　　show()方法和hide()方法是jQuery中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。

$("element").hide();

　　与css()方法设置display属性效果相同。

$("element").css("display","none");

　　注意hide()方法在将“内容”的display属性值设置为“none”之前，会记住原先的display属性值（“block”或“inline”或其他除了“none”之外的值）。当调用show()方法时，就会根据hide()方法记住的display属性值来显示元素。比如，一元素的display属性的值是“block”，当单击“标题”链接执行hide()方法的时候，hide()方法会做两步动作，首先会记住“内容”的display属性的值“block”，然后把display属性的值设置为“none”。

　　show()方法和hide()方法在不带任何参数的情况下，相当于css("display","none/block/inline")，作用是立即隐藏或显示匹配的元素，不会有任何动画。可以指定速度关键字，让元素具有动画效果，如：

$("element").hide("slow");

　　其他关键字还有“normal”和“fast”。slow的时间是600毫秒，normal是400毫秒，fast是200毫秒。

　　也可以使用数字定值，如使元素在1秒（1000毫秒）内显示出来。

$("element").show(1000);

　　从代码执行中，可以发现，show()和hide()会同时对元素的高度、宽度和不透明度同时做操作，直至元素完全显示或消失。

 

　　2.fadeIn()方法和fadeOut()方法

　　与show()和hide()不同的是，fadeIn()和fadeOut()只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失（“display:none”）.fadeIn()则相反。

 

　　3.slideUp()方法和slideDown()方法

　　slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的display属性值为“none”,当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下到上缩短隐藏。

　　

　　4.自定义动画方法animate()

　　通常情况下，当方法无法满足用户的各种需求，那就需要对动画有更多的控制，需要采取一些高级的自定义动画来解决这些问题。在jQuery中，可以使用animate()方法来自定义动画。其语法结构是:

animate(params,speed,callback);

　　参数说明如下：

　　param:一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2",...}.

　　speed:速度参数，可选。

　　callback:在动画完成时执行的函数，可选。

　　自定义简单动画

　　有一个空白的HTML文档，里面有一个id=“panel”的<div>元素，当<div>元素被单击后，能在页面上横向飘动。

<div id="panel"></div>

　　给这个<div>元素添加css样式。

#panel{
    position:relative;
    width:100px;
    height:100px;
    border:1px solid #0050D0;
    background:#96E555;
    cursor:pointer;
}

　　为了使这个元素动起来，我们给这个元素添加“left”样式属性。（需要改变元素的“top”、“left”、“bottom”、“right”样式属性，需要把元素的position设置为“relative”或者“absolute”）。

$(function(){
    $("#panel").click(function(){
        $(this).animate({left:"300px"},3000);
    })
})

　　点击id为“panel”的元素，会在3秒内向右移动300像素。

　　累加、累减动画

　　之前代码的基础上，在{left:"300px"}之前加上“+=”或者“-=”符号即表示在当前位置累加或者累减。

$(function(){
    $("#panel").click(function(){
        $(this).animate({left:"+=300px"},3000);  //在当前位置累加300px
    })
})

　　当元素被点击移动后，再次点击还会在现在的基础上继续向右移动。称为动画的累加。

　　多重动画

　　（1）同时执行多个动画

　　如果需要同时执行多个动画，例如在元素向右滑动的同时，放大元素的高度。根据animate()方法的语法结构，可以写出一下的代码：

$(function(){
    $("#panel").click(function(){
        $(this).animate({left:"300px",height:"200px"},3000);
    })
})

　　（2）顺序执行多个动画

　　animate()方法如果对同一个jQuery对象进行操作，可以改为链式的写法。

$(function(){
    $("#panel").click(function(){
        $(this).animate({left:"300px"},3000)
                .animate({height:"200px"},3000);
    })
})

　　回调函数

　　如果最后想改变元素的CSS样式。

css("border","5px solid blue");

　　如果在链式操作后直接加上上述代码。预期的效果是在动画的最后一步改变元素的样式，而实际的效果是，刚开始执行动画的时候，css()方法就被执行了。出现这个问题的原因是css()方法并不会加入到动画队列中么事立即执行。可以通过回调函数（callback）对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可。

$(function(){
    $("#panel").click(function(){
        $(this).animate({left:"300px"},3000)
                .animate({height:"200px"},3000，function(){
                    $(this).css("border","5px solid blue");
                });
    })
})

 

　　停止元素的动画

　　很多时候需要停止匹配元素正在进行的动画，例如上例的动画，如果需要在某处停止动画， 需要使用stop()方法。stop()方法的语法结构为:

stop([clearQueue],[gotoEnd]);

　　参数clearQueue和gotoEnd都是可选的参数，为boolean值。clearQueue代表的是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。

 

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

　　再使用animate()方法的时候，要避免动画基类而导致的动画与用户的行为不一致。当用户快速在某个元素上执行animate()动画时，就会出现动画累计。解决办法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。

if(!$(element).is(":animated")){
    //如果当前没有进行动画，则添加新动画。
}

　　这个判断方法在animate()动画中经常被用到。

 　　

　　延迟动画

　　在动画执行的过程中，如果想对动画进行延迟操作，那么可以使用delay()方法。

$(function(){
    $("#panel").click(function(){
        $(this).animate({left:"300px"},3000)
                .delay(1000)
                .animate({height:"200px"},3000)
                .delay(2000)
                .fadeOut("slow");
    })
})

　　delay()方法允许我们将队列中的函数延时执行。它既可以推迟动画队列中函数的执行，也可以用于自定义队列。

 

　　其他动画方法

　　jQuery还有4个专门用于交互的动画方法。

　　♦ toogle(speed,[callback]).

　　♦ slideToggle(speed,[easing],[callback]).

　　♦ fadeTo(speed,opacity,[callback]).

　　♦ fadeToggle(speed,[easing],[callback]).

　　toogle()

　　可以切换元素的可见状态。如果元素是可见的，则切换为隐藏的；如果元素是隐藏的，则切换为可见的。

$("#panel").click(function(){
    $(this).next().toggle();
})

　　slideToggle()

　　通过高度变化来切换匹配元素的可见性。只调整元素的高度。

$("#panel").click(function(){
    $(this).next().slideToggle();
})

　　fadeTo()

　　可以把元素的不透明度以渐进方式调整到指定的值。值调整元素的不透明度，即匹配的元素的高度和宽度不会发生变化。

$("#panel").click(function(){
    $(this).next().fadeTo(600,0.2);
})

　　当点击标签后，会在0.6秒内调整到指定的不透明度（20%）

　　fadeToggle()

　　通过不透明度变化来切换匹配元素的可见性。这个动画效果只调整元素的不透明度。

$("#panel").click(function(){
    $(this).next().fadeToggle();
})