jQuery动画特效笔记

show()、hide()、fadeIn()、fadeOut()、slideDown、slideUp、slideToggle()都接受可选的时长和回调参数（选项对象参数）。

toggle(duration,callback)

toggle(condition)传入true和不带参数调用show()是一样的，传入false则和不带参数调用hide()是一样的。

fadeTo()会将元素的当前opacity值变化的目标值，第一参数必须是时长，第二参数是opacity目标值，第三参数是回调函数。

 

时长：字符串"fast"表示200ms,字符串"normal"表示400ms,字符串"slow"表示600ms。默认为400ms。

jQuery.fx.speeds["medium-fast"]=300;

jQuery.fx.speeds["medium-slow"]=500;　　//改变默认定义的时长

 

animate(properties,duration,easing,callback);

animate(properites,options);

在animate()中可以使用"toggle"来实现显示或隐藏。

options参数：duration属性，complete属性（在动画完成时的回调函数），step属性（指定在每一步或每一帧调用的回调函数），queue属性（指定动画是否需要队列化），easing属性。

queue属性：设置为false可以取消默认的队列化，非队列化的动画会立即执行。随后队列化的动画不会等待非队列化的动画执行完成后才执行。

 $('img').fadeIn(500).animate({'width':'+=100'},{queue:false,duration:1000}).fadeOut(500);

 //改变width属性是非队列化的，这段width动画和fadeIn()效果的开始时间相同。fadeOut()效果会在fadeIn()效果完成时立刻开始，它不会等到width动画完成。

easing属性：指定缓动函数名，jQuery默认使用的是命名为"swing"的正弦函数。

 

stop([clearQueue][,gotoEnd])方法：

1.如果直接使用不带参数的stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画，可以用在不想让元素被用户连续触发，动画不断传入队列的情况。

 $(function(){

      $("#panel").hover(function() {

          $(this).stop().animate({height : "150",width : "300"} , 200 );

      },function() {

          $(this).stop().animate({height : "22",width : "60" } , 300 );

      });

});

 

2.stop(true)：若不使用参数在下面这种情况下就会出问题。

$(function(){

     $("#panel").hover(function() {

                $(this).stop()

                    .animate({height : "150" } , 200 )    //如果此时触发了光标移出的事件，将不执行2处的动画，而会执行3处的动画。

                    .animate({width : "300" } , 300 )　　//3

    },function() {

                $(this).stop()

                    .animate({height : "22" } , 200 )　　//2

                    .animate({width : "60" } , 300 )　　

    });

});

//解决方法：传入true在stop()，此时程序会把当前元素接下来尚未执行完的动画队列都清空。

3.stop(false,true)：可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况。

4.stop(true,true)：停止当前动画直接到达当前动画的末状态，并清空动画队列。

注：jQuery只能设置正在执行的动画的最终状态，而没有提供直接到达未执行动画队列最终状态的方法。

 

delay(duration[,name])：延迟命名队列中下一个函数的执行，在下一个函数执行之前会停顿一段时间。（省略name则默认为特效队列名称fx）

 

queue()、dequeue()、clearQueue()队列相关方法

queue(name)：根据传入的名称查找建立在匹配集中的第一个元素上的任意队列，并以函数数组形式返回。

queue(name,function)：将传入的函数添加到匹配集中的所有元素的命名队列（name参数）的末尾。如果在某个元素上不存在这种命名队列，则创建一个队列。

queue(name,queue)：把匹配元素上现有的任意队列替换为传入的队列。（参数name表示需要替换的队列名称。参数queue表示一个函数数组,用于替换命名队列中的现有函数）

dequeue(name)：删除匹配集中每个元素的命名队列中的第一个函数（最先传入的函数），并为每个元素执行此函数。（省略name则默认为特效队列名称fx）

clearQueue(name)：从命名队列中删除所有未执行的函数。（省略name则默认为特效队列名称fx）

注：队列函数queue()中的回调函数是jQuery1.4引入的新特性，可以用next()方法来连接以运行队列中的下一项，当然也可以调用dequeue()方法。

$('message').fadeIn().delay(200).queue(function(text){

    $(this).text('Hello World');

    next();        //运行队列中的下一项

}).animate({borderWidth:'+=10px;'});



//也可以调用dequeue()方法

$('message').fadeIn().delay(200).queue(function(text){

    $(this).text('Hello World');

    $(this).dequeue();        //替代next()方法

}).animate({borderWidth:'+=10px;'});

 

动画队列顺序总结：

1.对于一组元素上的动画，当在一个animate()方法中应用多个属性时，动画是同时发生的。当以链式的写法应用动画方法时，动画是按照顺序发生的。

2.当以回调的形式应用动画方式时，动画是按照回调顺序发生的。

 

代码片段集

//example1

$('img').animate({

    opacity:.25,

    font-size:10,

    width:'hide',

    borderLeft:'hide',

    borderRight:'hide',

    paddingLeft:'hide',

    paddingRight:'hide'    //可以实现'slideRight'效果（动画内容是元素宽度）

},{

    duration:400,

    complete:function(){

        this.text('Goodbye');

    },

    queue:true,

    easing:swing   

}

 

//example2

////jQuery动画框架允许为不同的CSS动画属性指定不同的缓动函数。

//第一种方式，使用specialEasing选项

$('img').animate({

    width:'hide',

    height:'hide',

    opacity:'hide' 

},{specialEasing:{

        width:'linear',

        height:'linear'

    }

  }

);



//第二种方式，在第一个对象参数中传入[目标值,缓动函数] 数组

$('img').animate({

    width:['hide','linear'],
    height:['hide','linear'],
    opacity:'hide'

});

 

//example3

//自定义缩放动画

$('.animateMe').each(function(){

    $(this).animate({

        width:$(this).width()*2,

        height:$(this).height()*2

    },2000);

});

 

//example4

//自定义掉落动画

$('.animateMe').each(function(){

    $(this).css('position','relative').animate({

        opacity:0,

        top:$(window).height()-$(this).height()-$(this).position().top     //注意这里是$(window)

    },'slow',function(){$(this).hide();}

    );

});

 

//example5

//自定义消散动画

$('.animateMe').each(function(){

    var position=$(this).position();

    $(this).css({
　　position:'absolute',

      top:position.top,
      left:position:left
    }).animate({

        opacity:'hide',

        width:$(this).width()*4,

        height:$(this).height()*5,

        top:position.top-($(this).height()/2*4),

        left:position.left-($(this).width()/2*4)

     },'normal');

});