第四章（jQuery中的事件和动画）（4.2 jQuery中的动画）

4.2.1 show() 方法和 hide() 方法

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

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

$("element").hide();   //通过 hide() 隐藏元素

//等同于

element.css("display","none");  // 通过css隐藏元素

当把元素隐藏后，可以使用 show() 方法显示

$("element").show();

通过 show() 和hide() 控制内容的显示和隐藏

$(function(){
     $("elem").toggle(function(){
        $("p").hide();
     },function(){
         $("p").show();
      });
  })

2 show() 和 hide() 让元素动起来

可以为show() 添加一个参数，让元素慢慢显示。

$("element").show("slow");  //600s显示出来

$("element").show("normal");  //400s显示出来

$("element").show("fast");  //200s显示出来

4.2.2 fadeIn() 方法和 fadeOut() 方法

fadeIn() 和 fadeOut() 方法改变元素的透明度（淡入淡出）

<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
         $(this).next().fadeOut(800);
    },function(){
         $(this).next().fadeIn(800);
    })
})
</script>
</head>
<body>
<div id="panel">
    <h5 class="head">什么是jQuery?</h5>
    <div class="content">
        文本内容
    </div>
</div>

4.2.3 slideUp() 和 slideDown() 方法

slideUp() 和 slideDown() 只会改变元素的高度。（卷动效果）

4.2.4 自定义动画方法 animate()

animate() 方法语法

animate(params, speed, callback);

参数说明：

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

②speed: 速度参数，可选

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

1 自定义简单动画

先创建一个HTML文档

<style type="text/css">
*{margin:0;padding:0;}    
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
</head>
<body>
<div id="panel"></div>
</body>
</html>

为了能使元素动起来，需要更改元素的“left”样式属性，在使用 animate() 之前。为了能影响元素的位置样式，必须先把元素的 position 设置为“relative” 或者“absolute” .

<script type="text/javascript">
$(function(){
    $("#panel").click(function(){
        $(this).animate({left:"500px"},3000);
    });
})
</script>

效果：

2 累加、累减动画

$(function(){
    $("#panel").click(function(){
        $(this).animate({left:"+=500px"},3000);
    });
})
</script>

当方块移动到目的地后，再点击，后继续后移。

3 多重动画

①同时执行多个动画

在元素滑动过程，放大元素高度

<script type="text/javascript">
$(function(){
    $("#panel").click(function(){
        $(this).animate({left:"500px",height:"200px"},3000);
    });
})
</script>

<div> 在向右滑动同时，会放大高度

②按顺序执行多个动画

上例中2种效果是同时发生的。如果想按顺序执行，例如先移动到某个位置后，再放大。可以拆开代码即可

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

4 综合动画

示例：单击<div> 元素后让它向右移动的同时增大它的高度，并将它的不透明度从50%变换到100%，然后再让它从上到下移动，同时宽度变大，当完成效果后，让它以淡出的方式隐藏。

$(function(){
    $("#panel").css("opacity","0.5");   //先设置不透明度
    $("#panel").click(function(){
        $(this).animate({left:"500px",height:"200px",opacity:"1"},3000)
                .animate({top:"200px","200px"},3000)
                 .fadeOut("slow");
    });
})

4.2.5 动画回调函数

上例中，如果想在最后一步切换元素 CSS样式，而不是隐藏元素

如果只是将 .fadeOut("slow") 改为 css("border","5px solid blue") ;是无法达到预期效果，因为在刚开始执行动画时，css() 方法就被执行了

原因是css() 并不会加入到动画队列中，而是立即执行，可以使用回调函数，对非动画方法实现排队，只要把 css() 方法写在最后一个动画的回调函数中即可

$(function(){
    $("#panel").css("opacity","0.5");   //先设置不透明度
    $("#panel").click(function(){
        $(this).animate({left:"500px",height:"200px",opacity:"1"},3000)
                .animate({top:"200px","200px"},3000,function(){
                    $(this).css("border","5px solid blue");
                });
    });
})

4.2.6 停止动画和判断是否处于动画效果

1 停止元素的动画

如果需要在某处停止动画，需要使用stop() 方法

stop([clearQueue][,gotoEnd]);

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

如果直接使用stop() ，则会立即停止当前正在进行的动画。

比如：在为一个元素绑定 hover 事件后，用户把光标移入元素时会触发动画效果，而当这个动画还未结束时，用户就将光标移出这个元素，那么光标移出的动画效果将会被放进队列中，等待光标移入的动画结束后再执行。因此如果光标移入移出的过快就会导致动画效果与光标动作不一致，此时只要在光标的移入，移出动画之前加入 stop() 方法，就能解决。

stop() 会结束当前正在进行的动画，并立即执行队列中下一个动画。

$(function(){
      $("#panel").hover(function() {
          $(this).stop().animate({height : "150",width : "300"} , 200 );
      },function() {
          $(this).stop().animate({height : "22",width : "60" } , 300 );
      });
});

如果是组合动画。需要 stop() 方法传入一个参数 true

$(function(){
     $("#panel").hover(function() {
                $(this).stop(true)
                    .animate({height : "150" } , 200 )
                    .animate({width : "300" } , 300 )
    },function() {
                $(this).stop(true)
                    .animate({height : "22" } , 200 )
                    .animate({width : "60" } , 300 )
    });
});

stop() 只能停止正在进行的动画，如果动画在执行第一阶段，触发后，只会停止当前的活动，并继续进行下面的动画，而光标移出事件中的动画要等这个动画结束后才会继续执行，当传入 true 后，此时程序会把当前元素接下来尚未执行完的动画队列都清空。

也可以两者结合起来使用 stop(true,true) ，即停止当前动画并直接到达当前动画的末状态，并清空动画队列。

注意： jQuery只能设置正在执行的动画的最终形态，而没有提供直接到达未执行动画队列最终状态的方法。

例如有一组动画：

$("div.content")
    .animate({"300"},200)
    .animate({height:"150"},300)
    .animate({opacity:"0.2"},2000);

无论如何设置 stop() 方法，都无法改变“width”和“height”时，将此<div>元素的末状态变成 300*150的大小，并且设置透明度为 0.2.、

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

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

if(!$(element).is(":animated")){    //判断元素是否处于动画状态
    //如果当前没有进行动画，则添加动画
}

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

4.2.7 其他动画方法

jQuery 中还有3个专门用于交互的动画方法

♦ toggle(speed,[callback]);

♦ slideToggle(speed,[callback]);

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

1 toggle() 方法

toggle() 方法可以切换元素的可见状态，如果元素可见，切换为隐藏，如果隐藏，切换为可见

$("elem").click(function(){
            $(this).next("div").toggle();
        })

// 等价于

<script type="text/javascript">
    $("elem").toggle(function(){
        $(this).next("div").hide();
    },function(){
        $(this).next("div").show();
    })
</script>

2 slideToggle() 方法

slideToggel()方法通过高度变化来切换匹配元素的可见性，这个动画效果只调整元素高度

    $("elem").click(function(){
            $(this).next("div").slideToggle();
        })


        //等价于

        $("elem").toggle(function(){
            $(this).next("div").slideUp();
                },function(){
                $(this).next("div").slideDown();
        })

3 fadeTo() 方法

fadeTo() 方法可以把元素的不透明度以渐进方式调整到指定的值，这个动画只调整元素的不透明度，即匹配的元素的高度和宽度不会发生变化。

<script type="text/javascript">
    $("elem").click(function(){
        $(this).next("div").fadeTo(600, 0.2);
    })
</script>

4.2.8 动画方法概括

1 改变样式属性

方法名	说明
hide()和show()	同时修改多个样式属性，即高度、宽度和不透明度
fadeIn()和fadeOut()	只改变不透明度
slideUp()和slideDown()	只改变高度
fadeTo()	只改变不透明度
Toggle()	用来代替hide()和show() 方法，会同时修改多个样式
slideToggle()	用来代替slideUp()和slideDown()方法，只改变高度
Animate()	属于自定义动画方法，以上各种动画方法实质内部调用了animate() 方法，此外，直接使用 animate() 方法还能自定义其他的样式属性，例如：”left”,”marginLeft”,”scrollTop”…..

♦ animate() 方法可以代替其他所有的动画方法

<script type="text/javascript">
 
// 用animate() 代替show() 方法
$("p").animate({height:"show","show",opacity:"show"},400);
//等价于
$("p").show(400);

// 用animate() 代替fadeIn() 方法
$("p").animate({opacity:"show"},400);
//等价于
$("p").indeIn(400);

//用animate() 代替slideDown() 方法
$("p").animate({height:"show"},400);
//等价于
$("p").slideDown(400);

//用animate() 代替fadeTo()方法
$("p").animate({opacity:"0.5"},400);
//等价于
$("p").fadeTo(400, 0.5);

</script>

事实上，这些动画就是animate()方法一种内置了特定样式属性的简写形式。在animate() 方法中，这些特定样式属性值可以为|“show”“hide”“toggle”，也可以是自定义数字（值）。

2 动画队列

①一组元素上的动画效果

当在一个animate() 方法中应用多个属性时，动画是同时发生的

当以链式的写法应用动画时，动画是按顺序发生的

②多组元素上的动画效果

默认情况下，动画都是同时发生的

当以回调的形式应用动画方式时，动画是按照回调顺序发生的

♠ 在动画方法中，要注意其他非动画方法会插队，例如 CSS() 方法要使非动画方法也按照顺序执行，需要把这些方法写在动画方法的回调函数中。