jquery中的动画与效果

一、show()和hide()方法：
这两个方法是JQuery中最简单的两个动画效果。hide()是把元素的display样式设为“none”，show()是把元素的display样式设为原来的样式（除了none之外的样式）。JQuery在调用hide()时会记住元素原先的display属性，当调用show()的时候会根据hide()方法记住的display属性来显示元素。

语法：
$("element").hide([speed][,callback])
$("element").show([speed][,callback])
speed：动画速度的参数，一般以毫秒为单位，也查以使用slow,fast等，如果不加此参数的话，那不会出现动画过渡效果。
callback：动画执行结束后回调函数
以上两个动画会同时表现出三种效果：高度变化、宽度变化、透明度的变化。

示例：
$("element").show(1000);元素在一秒内动态显示出来。
$("element").hide(1000);元素在一秒内动态隐藏起来。

下面两个函数互为回调函数，一旦运行起来，就会把相应的元素以动画形式反复显示、隐藏。
functionhideDiv() {
$("#dd").hide(2000, function () {showDiv(); });
}
functionshowDiv() {
$("#dd").show(2000, function () {hideDiv(); });
}

二、fadeIn()方法和fadeOut()方法
这两个方法只改变元素的透明度，不改变大小。

语法：
$("element").fadeIn([speed][,callback])
$("element").fadeOut([speed][,callback])
speed：动画速度的参数，一般以毫秒为单位，也查以使用slow,fast等，如果不加此参数的话，那也会出现默认动画过渡效果。
callback：动画执行结束后回调函数

示例：
$("element").fadeOut(1000);在一秒内，元素越来越透明，直到完全消失。
$("element").fadeIn(1000);与fadeOut()相反。

下面两个函数互为回调函数，一旦运行起来，就会把相应的元素以反复出现“褪色”与“上色”的动画效果。
functionhideDiv() {
$("#dd").fadeOut(2000, function () {showDiv(); });
}
functionshowDiv() {
$("#dd").fadeIn(2000, function () {hideDiv(); });
}

三、slideUp()方法和slideDown()方法
这两个方法只改变元素的高度，不改变宽度和透明度

语法：
$("element").slideUp([speed][,callback])
$("element").slideDown([speed][,callback])
speed：动画速度的参数，一般以毫秒为单位，也查以使用slow,fast等，如果不加此参数的话，那也会出现默认动画过渡效果。
callback：动画执行结束后回调函数

示例：
$("element").slideUp(1000);在一秒内，元素高度逐渐变为0。
$("element").slideDown(1000);与fadeOut()相反。

下面两个函数互为回调函数，一旦运行起来，就会把相应的元素以反复出现“褪色”与“上色”的动画效果。
function hideDiv() {
$("#dd").slideUp(2000, function () { showDiv(); });
}
function showDiv() {
$("#dd").slideDown(2000, function () { hideDiv(); });
}

四、自定义动画方法animate()
上面的三组方法能够实现简单的动画，但如果需要一些高级动画时就需要使用animate()方法来实现。

语法：
$("element").animate(params,speed,callback);
params：包含样式{属性:值}的一组参数。如：{backgroundColor:"red",color:"yellow",height:"160px"}
speed：动画显示的速度，以毫秒为单位
callback：回调函数

1.自定义简单动画
简单的一次性动画
$("dd").animate({left: "500px"}, 3000);
该动画的效果是在3秒内使dd元素右移500像素。需要事选把dd元素的position设置为absolute或relative。

2.累加累减动画
在现有的状态下进行属性的累加变化，实现动态动画。
$("dd").animate({left: "+=500px"}, 3000);
它的作用是在当前位置向后再移500像素。当然也可以设为{left:"-=500px"}使动画向右累加移动。

3.多重动画
a.同时执行多个动画，即同时改变元素的多个样式。
$("#dd").animate({ left: "800",width:"200",height:"400" }, 3000);
它的作用是dd元素在向右移动的同时把宽度加大为200像素，并把高度加大为400像素。

b.按顺序执行多个动画，按一定的次序依次改变元素的多个样式。
$("#dd").animate({ left: "800" }, 3000).animate({ top: "300" }, 3000).animate({ width: "300",left:"-=150" }, 3000);
它的作用是dd元素先右移800像素，再下移300像素，最后再同时拉宽左移

4.使用animate()的回调函数
如果在上面“多重动画”的基础上，让动画执行完成后，把元素的颜色变成红色的话，有的人会这样写代码：
$("#dd").animate({ left: "800" }, 3000).animate({ top: "300" }, 3000).animate({ width: "300",left:"-=150" }, 3000).css("background-color","red");
这种写法不正确，因为css()不会被加到动画过程中，而是立即被执行。我们可以把改变颜色的代码放在回调函数中实现动画的排队效果。
$("#dd").animate({ left: "800" }, 3000).animate({ top: "300" }, 3000).animate({ width: "300",left:"-=150" }, 3000,function(){changeColor(););
functionchangeColor() {
$("#dd").css("background-color","red");
}
在最后一个动画效果执行完成后回执行回调函数changeColor();

5.停止动画
停止当前执行的动画。
语法：
$("element").stop([clearQueue][,gotoEnd]);
clearQueue：bool，代表是否要清空未执行的动画队列
gotoEnd：bool，代表将正在执行的动画直接跳到末状态

如果我们做了一个下拉菜单，当鼠标移上去的时候就菜单下拉，当鼠标离开的时候菜单上卷，下拉和上卷的动画时间都是3 秒种。
$("#dd").hover(
function () {
$("#dd").animate({ height: "500" }, 3000);
},
function () {
$("#dd").animate({ height: "100" }, 3000);
}
);
如果我快速不断地将鼠标移入移出菜单（即，当菜单下拉动画未完成时，鼠标又移出了菜单）就会产生“动画积累"，当鼠标停止移动后，积累的动画还会持续执行，直到动画序列执行完毕。这样导致动画效果与鼠标动作不一致。
要解决此问题只需要在移入移出动画之前加入stop()，结束当前动画进入下个动画即可。
代码如下：
$("#dd").hover(
function () {
$("#dd").stop().animate({ height: "500" }, 3000);
},
function () {
$("#dd").stop().animate({ height: "100" }, 3000);
}
);

如果需到组合动画，在移入移出动画之前加入stop()来停止当前动画，如下
$("#dd").hover(
function () {
$("#dd").stop().animate({ height: "500" }, 3000).animate({ width: "500px" }, 3000);
},
function () {
$("#dd").stop().animate({ height: "100" }, 3000).animate({ width: "100px" },3000);
}
);
效果并不好，因为stop()只是停止了当前第一步的动画（即{height:"500"}），然后又进入了第二步的动画（即[width:"500"}）。
此时stop()的第一个参数就派上了用场，它会把下面没有执行的动画序列都清空掉。
$("#dd").hover(
function () {
$("#dd").stop(true).animate({ height: "500" }, 3000).animate({ width: "500px" }, 3000);
},
function () {
$("#dd").stop(true).animate({ height: "100" }, 3000).animate({ width: "100px" },3000);
}
);
当然也可以使用第二个参数，让动画达到最后状态。如：stop(false,true)

判断元素是否正处于动画中
if(!$("element").is(":animated")){
//...
}

<wbr></wbr>