jQuery(5)--jQuery中的动画

hide() 和 show()                   // 同时修改多个样式属性，即高度、宽度和不透明度    速度参数：slow-0.6s  normal-0.4s   fast-0.2s
fadeIn() 和 fadeOut()              //只改变不透明度
slideDown() 和 slideUp()          //只改变高度
fadeTo()                          //只改变不透明度，把元素的不透明度以渐进方式调整到指定值
toggle()                          //用来代替hide()方法和show()方法，所以会同时修改多个样式属性，即高度、宽度和不透明度
slideToggle()                     //用来代替slideDown()  和 slideUp(),只改变高度
fadeToggle()                      //用来代替fadeIn() 和 fadeOut()  只改变不透明度
animate()                         //属于自定义动画的方法，以上各种动画方法实质内部都调用了animate()方法,是animate()方法的一种内置了特定样式属性的简写形式

animate(params,speed,callback);

params: 一个包含样式属性及值的映射，如{left:"500px",height:"200px",....}

speed: 速度参数，可选

callback : 回调函数，在动画完成是执行的函数，可选

eg:
$("panel").click(function(){

   $(this).animate({left:"400px", height:"200px", opacity:"1"},300)

               .animate({top:"200px", "200px"}, 300, function(){

                    $(this).css("border", "5px solid blue");   //css()为非动画方法，不会加入到动画队列中，而是立即执行。所以要想在动画结束后再执行css样式，需把css()方法放在回调函数中

})

});

动画队列

    一组元素上的动画效果

• 当一个animate()方法中应用多个属性时，动画是同时发生的；所以要按顺序执行动画，如先改变高度，再改变宽度，需把代码拆开，写两个animate()
• 当用链式的写法应用动画方法时，动画时按照顺序发生的

判断是否处于动画状态

if( !$("element").is(":animate")){  //判断元素是否处于动画状态

  //如果当前没有进行动画，则添加新动画

}

停止元素的动画

stop([clearQueue],[gotoEnd])

clearQueue : true/false   可选，是否清空未执行完的全部动画队列   默认为false，此时只会结束当前动画，并立即执行队列中的下一个动画

gotoEnd : true/false   可选，是否直接将正在执行的动画跳到结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况，可以通过stop(false,true)来让当前动画直接到达末状态