show() and hide()
1. show()和hide()
show()方法和hide()方法是jQuery中最基本的动画方法，在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为none。
$("element").hide();
这段代码的功能与css()方法设置display属性效果相同。
$("element").css("display","none");
当把元素隐藏后，可以使用show()方法将元素的display样式设置为先前的显示状态（"block"或"inline"或其他值）。
$("element").show();
<body>
<div id="panel">
<h5 class="head">新闻标题</h5>
<div class="content">新闻内容.............................................
.....................................................................
......................................JavaScript库。
</div>
</div>
</body>
<script>
$(function() {
$("#panel h5.head").toggle(function() {
$(this).next().hide();
},function() {
$(this).next().show();
})
})
</script>
注意hide()在将"内容"的display属性值设置未来"none"之前，会记住原先的display属性值。当调用show()方法时，就会根据方法记住的display属性值来显示元素。
在本例中，”内容“的display属性值是block，当点单击”标题“链接执行hide()方法的时候，hide()会做两步动作，首先会记住”内容“的display属性值block，然后把display属性值设置为”none“。
2. show()方法和hide()方法让元素动起来
show和hide方法在不带任何参数的情况下，是没有动画的，如果希望在调用show方法时，元素慢慢显示出来，可以为show()方法指定一个速度参数，例如，指定一个速度关键字”slow“：
$("element").show("slow");
元素将在600ms内慢慢显示出来，其他的速度关键字 还有normal（400ms），fast（200ms）。
$(function() {
$("#panel h5.head").click(function() {
$(".content").toggle("slow");
})
})
$(function () {
$(function () {
$("#panel h5.head").click(function () {
if ($(this).next().is(":visible")) {
$(this).next().hide(600);
} else {
$(this).next().show(200);
}
})
})
})
fadeIn() and fadeOut()
与show()方法不相同的是，fadeIn()方法和fadeOut()方法只改变元素的不透明度。fadeOut方法会在指定的一段时间内降低元素的不透明度，直到元素完全小时（display：none）。fadeIn()方法则相反。
$(function () {
$(function () {
$("#panel h5.head").click(function () {
if ($(this).next().is(":visible")) {
$(this).next().fadeOut();
} else {
$(this).next().fadeIn();
}
})
})
})
当第一次单击”标题“链接后，”内容“慢慢地消失了（淡出），当再次单击”标题“链接后，”内容“又慢慢地显示了（淡入）。
slideUp() and slideDown()
slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的display属性值为none，当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下至上缩短隐藏。使用slideUp()方法和slideDown()再次对”内容“的显示和隐藏方式进行改变。
$(function () {
$(function () {
$("#panel h5.head").click(function () {
if ($(this).next().is(":visible")) {
$(this).next().slideUp();
} else {
$(this).next().slideDown();
}
})
})
})
jQuery中任何动画效果，都可以指定3种速度参数，即slow，normal，fast，时间长度分别为0.6秒，0.4秒，0.2秒。当使用速度关键字需要加引号，如果需要用数学作为时间参数就不需要加引号。
自定义动画方法animate()
很多情况下，需要对动画有更多控制，需要采用一些高级的自定义动画来解决这些问题，jQuery中，可以使用animate()方法来自定义动画。
animate(params , speed , callback);
- params：一个包含样式属性及值的映射。
- speed：速度参数，可选。
- callback：在动画完成时执行的函数，可选。
1. 自定义简单动画
前面的几个例子，从不同的方面使动画动了起来，animate()方法也可以使元素动起来，而且animate()方法更具有灵活性。通过animate()方法，能够实现更加精致新颖的动画效果。
现在有一个空白HTML文档，里面有一个div元素，单击div元素，能在页面上横向飘动。
<style>
#panel {
position: relative;
width: 100px;
height: 100px;
border: 1px solid #0050D0;
background: #96E555;
cursor: pointer;
}
</style>
<body>
<div id="panel"></div>
</body>
为了使元素动起来，要更改元素的left样式属性。需要注意的是在使用animate()方法之前，为了能影响该元素的top，left，bottom，right样式属性，必须先把元素的position样式设置为relative或者absolute。
$(function() {
$("#panel").click(function() {
$(this).animate({left:"500px"},3000);
})
});
在本段代码中，首先为id为panel的元素创建一个单击事件，然后对元素加入animate()方法，使元素在3秒内，向右移动500像素。
2. 累加、累减动画
在之前代码中，设置了{left:"500px"}作为动画参数。如果在500px之前加上"+="或者"-="符号即表示在 当前位置累加或者累减。
$(function() {
$("#panel").click(function() {
$(this).animate({left:"+=500px"},3000);
})
});
3. 多重动画
1.同时执行多个动画
上面例子中，通用控制属性left的值实现了动画的效果，这是一个很单一的动画，如果需要同时执行多个动画，例如在元素向右滑动的同时，放大元素的高度：
$(function() {
$("#panel").click(function() {
$(this).animate({left:"500px",height:"200px"},3000);
})
});
运行后，div元素在向右滑动同时，也会放大高度。
- 按顺序执行多个动画
上例中，两个动画效果是同时发生的，如果想要按顺序执行动画，例如让div元素先向右移动，然后在放大高度，只需吧代码拆开，然后按顺序写就可以了。
$(this).animate({left:"500px"},3000);
$(this).animate({height:"200px"},3000);
因为都是对同一个jQuery对象继续操作，所以也可以改为链式写法。
$(this).animate({left:"500px"},3000).animate({height:"200px"},3000);
像这样，动画效果的执行具有先后顺序，称为动画队列。
4. 综合动画
需求：单击div元素后，让它向右移动的同时增大它的高度，并将它的不透明度从0.5变换到1，然后在让它从上倒下移动，同时宽度变大，完成这些效果后，淡出隐藏。
$(function() {
$("#panel").click(function() {
$(this).animate({left:"500px",height:"200px",opacity:"1"},3000);
$(this).animate({top:"200px",width:"200px"},3000);
$(this).fadeOut("slow");
})
});
动画回调函数
在上例中，如果想在最后一步切换元素的CSS样式，而不是隐藏元素：
css("border","5px solid blue");
如果只是按照常规方式，将fadeOut("slow")改为css("border","5px solid blue")。
这样并不能得到预期效果。预期的效果是在动画的最后一步改变元素的样式，而实际的效果是，刚开始执行动画的时候，css()方法就被执行了。
出现这个问题的原因是css()方法并不会加入到动画队列中，而是立即执行。可以使用回调函数(callback)非动画方法实现排队，只要把css()方法写在最后一个动画的回调函数里即可。
$("#panel").click(function() {
$(this).animate({left:"500px",height:"200px",opacity:"1"},3000);
$(this).animate({top:"200px",width:"200px"},3000,function() {
$(this).css("border","5px solid blue");
});
})
这样依赖，css()方法就加入动画队列中了。
注意：callback回调函数适用于jQuery所有的动画效果方法，例如slideDown()方法的回调函数：
$("#element").slideDown("normal",function() { // ... })这段代码表示，id=element的元素将在0.4秒内向下完全展开，当动画完成后，执行回调函数体内的代码。
停止动画和判断是否处于动画状态。
1. 停止元素的动画
很多时候需要停止匹配元素正在进行的动画，例如上例的动画，如果需要在某处停止动画，需要使用stop()方法。
sopt([clearQueue],[gotoEnd]);
- clearQueue：布尔值，代表是否要清空未执行完的动画队列
- gotoEnd：代表是否直接将正在执行的动画跳转到末状态。
如果直接使用stop方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。
经常遇到的一种情况，为一个元素绑定hover事件之后，用户把光标移入元素时触发动画效果，而当这个动画还没结束时，用户光标就移出元素了，那么光标移出的动画效果将会被放进队列中，等待光标移入的动画结束后再执行。
$(function() {
$("#panel").mouseover(function() {
$(this).animate({left:"500px"},3000);
})
$("#panel").mouseout(function() {
$(this).animate({left:"0px"},3000);
})
});
如上例子，鼠标移入会触发一段向右移动动画，假设移入div元素后不动，那么自然而然会触发第二段动画，但是第二段动画必须在第一段动画执行结束后在执行。
此时，只要在光标的移入、移出动画之前加入stop方法，就可以解决问题。stop()方法会结束当前正在进行的动画，并立即执行队列中的下一个动画。
$(function() {
$("#panel").mouseover(function() {
$(this).stop().animate({left:"500px"},1500);
})
$("#panel").mouseout(function() {
$(this).stop().animate({left:"0px"},1500);
})
});
如果遇到组合动画，例如：
$("#panel").hover(function() {
$(this).stop()
.animate({height:"150px"},200) // 如果此时发生了光标移出事件
// 将执行下面的动画
// 而非光标移出事件中的动画
.animate({width:"300px"},300);
},function() {
$(this).stop()
.animate({height:"22"},200)
.animate({width:"60"},300);
})
此时只用一个不带参数的stop()方法就显得力不从心了，因为stop()只会停止正在进行的动画，假设现在光标移入，动画正执行第一阶段（height：150），此时我们触发光标移出事件，只会停止当前的动画，并继续进行下面的animate（width:300），而我们的需求是直接跳过第一阶段的动画，这显然不是预期的结果。
这种情况下stop()方法的第一个参数发挥作用了，可以把第1个参数（clearQueue）设置为true，此时程序会把当前元素接下来尚未执行完的动画队列都清空。
$("#panel").hover(function() {
$(this).stop(true)
.animate({height:"150px"},200) // 如果此时发生了光标移出事件
// 将跳过后面的动画队列
.animate({width:"300px"},300);
},function() { // 而开始执行这里的动画
$(this).stop(true)
.animate({height:"22"},200)
.animate({width:"60"},300);
})
第2个参数（gotoEnd）可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要前一个动画的末状态的情况，可以通过stop(false,true)来让当前动画到达末状态。
当然也可以两者结合起来使用stop(true,true)，即停止当前动画，并直接到达当前动画的末状态。并清空动画队列。
注意，jQuery只能设置正在执行的动画的最终状态，而没有提供直接到达未执行动画队列最终状态的方法。例如：
$("div.content")
.animate({width:"300"},200)
.animate({height:"150"},300)
.animate({opacity:"0.2"},2000);
**无论怎么设置stop()方法，均无法改变width或者height时，将此div元素的末状态变成300x150的大小，并且设置透明度0.2。
说白了，我们只能加快（直接到达）这个过程，或者说取消过程，直接看到结果。但是结果我们不能改变，这由样式决定了。
2. 判断元素是否处于动画状态
在使用animate()方法时候，要避免动画积累而导致的动画与用户的行为不一致。当用户快速在某个元素上执行animate动画时，就会出现动画积累。解决方法是判断元素是否处于动画状态，如果元素不出于动画状态，再为元素添加新的动画，否则不添加。
if (! $("element").is(":animated")) { // 判断元素是否正处于动画状态
// 如果当前没有进行动画，则添加新动画
}
这个判断方法在animate()动画中经常用到，需要注意。
3. 延迟动画
在动画执行过程中，如果想对动画进行延迟操作，那么可以使用delay()方法。
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
.delay(1000)
.animte({top:"200px",width:"200px"},3000)
.delay(2000)
.fadeOut("slow");
delay()方法允许我们将队列中的函数延迟执行。它既可以推迟动画队列中函数的执行，也可以用于自定义队列。
其他动画方法
jQuery中还有4个专门用于交互的动画方法。
-
toggle( speed , [callback] ) -
slideToggle(speed , [easing] , [callback]) -
fadeTo(speed , opacity , [callback]) -
fadeToggle(speed , [easing] , [callback])
toggle()
toggle()方法用于切换元素的可见状态。如果元素是可见的，则切换为隐藏的；如果元素是隐藏的，切换为可见的。
$("#panel h5.head").click(function() {
$(this).next().toggle();
})
当单击”标题“链接后，”内容“会在可见和隐藏两种状态之间切换。
相当于：
$("#panel h5.head").toggle(function() {
$(this).next().hide();
},function() {
$(this).next().show();
})
slideToggle()
slideToggle()方法通过高度变化来切换匹配元素可见性。这个动画效果只调整元素的高度。
$("#panel h5.head").click(function() {
$(this).next().slideToggle();
})
单击”标题“后，”内容“会在可见和隐藏两种状态之间切换，不过是通过改变元素的高度来实现的。
相当于：
$("#panel h5.head").toggle(function() {
$(this).next().slideUp();
},function() {
$(this).next().slideDown();
})
fadeTo()
fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度，即匹配的元素的高度和宽度不会发生变化。
$("#panel h5.head").click(function() {
$(this).next().fadeTo(600,0.2);
})
当“标题”被单击后，“内容”会渐渐地调整到指定的不透明度（20%）。
fadeToggle()
fadeToggle()方法通过不透明度变化来切换匹配元素的可见性。这个动画效果只调整元素的不透明度。
$("#panel h5.head").click(function() {
$(this).next().fadeToggle();
})
相当于：
$("panel h5.head").toggle(function() {
$(this).next().fadeOut();
},function() {
$(this).next().fadeIn();
})
总结：
特别注意animate()方法，它可以替代其他所有动画方法。
- 代替show()
$("p").animate({height:"show",width:"show",opacity:"show"},400);
// 等价于
$("p").show(400);
- 代替fadeIn()
$("p").animate({opacity:"show"},400);
// 等价于
$("p").fadeIn(400);
- 代替slideDown()
$("p").animate({height:"show"},400);
// 等价于
$("p").slideDown(400);
- 代替fadeTo()
$("p").animate({opacity:"0.6"},400);
// 等价于
$("p").fadeTo(400,0.6);
动画队列
-
一组元素上的动画效果
- 当在一个animate()方法中应用多个属性时，动画是同时发生的。
- 当以链式的写法应用动画方法时，动画是按照顺序发生的（除非queue选项值为false）。
-
多组元素上的动画效果
- 默认情况下，动画都是同时发生的。
- 当以回调的形式应用动画方式时（包括动画的回调函数和queue()方法的回调函数），动画是按照回调顺发生的。
