jQuery动画

在jQuery中，如果我们想要实现元素的显示和隐藏，可以使用2组方法：
（1）show()和hide()；
（2）toggle()；

$().hide()  $().show()`

在jQuery中，我们还可以使用toggle()方法来“切换”元素的“显示状态”。也就是说，如果元素是显示状态，则变成隐藏状态；如果元素是隐藏状态，则变成显示状态。

$().toggle()                     //简单的toggle()$().toggle(speed , callback);    //动画的toggle()

参数speed表示动画执行的速度，单位是毫秒；
参数callback为可选参数（可以省略），表示动画执行完成之后的“回调函数”。
淡入和淡出
（1）fadeIn()和fadeOut()；
（2）fadeToggle()；
（3）fadeTo()；
淡入和淡出效果，本质上其实都是通过改变元素的“透明度”（opacity属性）来实现的。
使用方法和hide/show类似;
（1）show()和hide()，是通过改变height、width、opacity来实现动画的显示与隐藏；
（2）fadeIn()和fadeOut()，只通过opacity来实现动画的显示与隐藏；
不过这2组方法在动画显示与隐藏完成之后，都会设置display:none或者display:block。
这2组方法它们在视觉上也有差别，例如hide()隐藏的效果是从下到上或从右下到左上慢慢折叠缩小，而fadeOut的淡出效果是整体淡化直至消失。
在jQuery中，fadeIn()和fadeOut()这2种方法都是通过改变元素的透明度来实现淡入淡出的动画效果。其中在淡入效果中，透明度（opacity）从0.0变化到1.0；在淡出效果中，透明度（opacity）从1.0变化到0.0。
如果我们想要将元素透明度指定到某一个值，则可以使用fadeTo()方法。

$().fadeTo(speed , opacity , callback)

滑上和滑下
（1）slideUp()和slideDown()；
（2）slideToggle()；
使用方法与上面类似;
在实际开发中，对于滑动动画，slideToggle()方法相对slideUp()和slideDown()来得更加方便。
自定义动画
在jQuery中，对于自定义动画，我们可以使用animate()方法来实现。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
可以用 animate() 方法来操作所有 CSS 属性
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。
累积动画
在上面的代码中，我们设置了{“width”:”100px”}作为动画参数。如果我们在100px之前加上“+=”，这种形式则表示以元素本身的width为基点进行“累加”；如果我们在100px之前加上“-=”则表示以元素本身的width为基点进行“累减”。
jQuery animate() - 操作多个属性

$("button").click(function(){  $("div").animate({    left:'250px',    opacity:'0.5',    height:'150px',    width:'150px'  });}); 

队列动画

$().animate().animte()…….animte()

动画的停止

$().stop(clearQueue,gotoEnd)

参数clearQueue和参数gotoEnd都是可选参数，取值都为布尔值。两个参数默认值都为false。
参数clearQueue表示是否要清空“未执行”的“动画队列”。这里大家要看准了，清空的是整个“动画队列”，而不仅仅是某一个动画。
参数gotoEnd，表示是否直接将正在执行的动画跳转到末状态。
默认情况下，没有参数值的stop()方法只会停止“当前正在执行”的动画。如果你使用animate()方法为当前元素设置了A、B、C这3个动画。如果当前正在执行的动画是A，则只会停止动画A的执行，不会阻止B和C的执行。如果我们想停止所有的动画，可以使用设置参数clearQueue为true来实现。
jQuery stop()方法

在jQuery中，如果我们想要对动画进行延迟操作，可以用delay()方法来实现。