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');
});