JQ中的动画

方法	介绍	示例
hide()	隐藏	$("ele").hide(500)
show()	显示	$("ele").hide(500)
fadeOut()	淡出 改变透明度至隐藏
fadeIn()	淡入 改变透明度至显示
slideDown()	由上到下显示
slideUp()	由下到上隐藏
toggle()	切换元素的 可见状态
slideToggle()	通过改变元素的高度来切换可见状态
fadeToggle()	通过改变元素的透明度来切换可见状态
fadeTo()	改变元素至固定的透明度	$('elel').fadeTo(600,.5);

自定义动画animate()

animate(params,speed,callback)

params:包含样式属性及值到映射
cllback：动画执行完成后到回调函数 适用与以上所有的JQ动画

$('.btn').click(function(){
    var a = function(){
            console.log(1);
        };//回调函数
        $(this).next().animate({'width':'300px','height':'300px'},2000,a);
 });

累加累减动画 “+=”实现累加累减动画

$('.btn').click(function(){
    $(this).next().animate({left:'+=100px'},200);
});

多重动画同时执行

$(this).next().animate({'left':'+=100px','top':'+=100px'},200);});

多重动画先后执行

$(ele) .animate({'left':'+=100px'},200).animate({top:'+=100px'},200);

停止动画和判断是否处于动画状态

stop([clearQueue],[gotoEnd])

clearQueueb 布尔值表示是否要清空执行完成的队列动画
gotoEnd 是否直接将正在执行的动画跳转到末尾
直接使用stop()会立即停止当前正在进行的动画，并立即执行队列中的下一个动画 常用于解决类似用户操作过快的情况
需要给stop()添加参数的情况

$('.test').hover(function(){
        $(this).stop(true)
            .animate({'width':'+=200px'},1500)//如果不设置stop(true)属性此时触发光标移出事件，将执行下一步高度动画，而不是光标移除动画
             .animate({height:'200px'},1500);
        },function(){
        $(this).stop(true)//通过设置第一个true参数 解决上面的问题
             .animate({'width':'100px'},1500)
             .animate({height:'100px'},1500);
  });

is(":animated")判断是否在动画中，常用方法

    $('.btn').click(function(){
        if(! $(this).next().is(":animated")){
            $(this).next().animate({'width':'+=200px'},500);
        }
    });

delay()延迟动画

可以讲队列中的动画延迟操作，也可以用于自定义队列

$('.btn').click(function(){
        if(! $(this).next().is(":animated")){
            $(this).next().animate({'width':'+=200px'},500)
            .delay(1000)//延迟动画
            .animate({height:"+=200px"});
        }
});