（九）jQuery中的动画(载)

原文链接：http://blog.csdn.net/zfy865628361/article/details/50358367

首先，用jQuery做动画效果要求在标准模式下，否则可能会引起动画抖动。标准模式即要求文件头部包含如下的DTD定义：

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"">

一、最常用的动画方法，show()和hide()方法

示例代码:

<span style="font-size:14px;">$("div").hide();
$("div").show();</span>

上面示例为show()和hide()方法不带任何参数的情况下，作用是立即隐藏或显示匹配的元素，不会有任何动画。如果给方法指定一个速度参数，就可以让元素动起来。如下代码使元素在500ms中完成动画

$("div").hide(500);
$("div").show(500);

此外速度参数还有一些推荐值，如：

$("div").show("slow");     //600ms
$("div").show("normal");   //400ms
$("div").show("fast");     //200ms 

下面就用这两个方法实现点击按钮一次内容慢慢消失，当再次单击按钮内容慢慢的显示

$(".btn").click(function() {
　　if ($(".newsInfo").is(":visible")) {//如果为显示状态
        $(".newsInfo").hide(500);
    } else {
        $(".newsInfo").show(500);
    }
});

说明：当为一个元素调用hide()方法时，会将该元素的display样式改为"none"，但是在这之前会先记住原先的display属性值("block"或"inline"或其他除了"none"之外的值)。当调用show()方法时，就会根据hide()方法记住的display属性值来显示元素。

二、fadeIn()方法和fadeOut()方法

与show()方法不相同的是这两个方法只改变元素的不透明度。fadeOut(0方法会在指定的一段时间内降级元素的不透明度，直到元素完全消失("display:none")。fadeIn()方法则相反。

下面就用这两个方法实现点击按钮一次内容慢慢消失，当再次单击按钮内容慢慢的显示

$(".btn").toggle(function() {
    $(this).next(".newsInfo").fadeOut(500);
}, function() {
    $(this).next(".newsInfo").fadeIn(500);
}); 

三、slideUp()方法和slideDown()方法

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

下面就用这两个方法实现鼠标箭头移动到按钮上时内容向下出现，当鼠标的箭头移出按钮时内容向上退出显示

$(".btn").hover(function() {
　　$(".newsInfo").stop(true).slideDown(500);
}, function() {
　　$(".newsInfo").stop(true).slideUp(500);
}); 

其中用到了一个stop()方法，它的语法结构为:stop([clearQueue] [, gotoEnd]);

参数clearQueue和gotoEnd都是可选参数，为布尔值。clearQueue代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。如果直接使用stop()方法，则会立即停止当前正在进行的动画。

四、自定义简单动画animate()

语法结构：animate(params，speed，callback)；
参数说明:params：一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2", ...}
speed：速度参数，可选
callback：在动画完成时执行的函数，可选

$(".btn").click(function() {
　　$(this).animate({
　　　　left: "300px",
　　　　height: "200px"
}, 1000, function() {
console.log('回调了'); 

① toggle(speed，[callback])

$(".btn").toggle(500, function() {
    console.log('我是回调函数');
}); 

② slideToggle(speed，[callback])

<span style="font-size:14px;">$(".btn").click(function(){
        $(".mycontent").slideToggle();
});</span>    

③  fadeTo(speed，opacity，[callback])

$(".btn").click(function(){
　　$(".mycontent").fadeTo(500,0.2);
});