jquery动画效果总结

一.jquery的动画速度fast-slow对应着600ms,200ms,不写是400ms

二.禁用jquery的动画

将jQuery.fx.off设置为true即可

    $(".stopping").click(function(){
        jQuery.fx.off = true;//禁用所有jquery的动画
    })

三.jquery动画是异步的调用动画方法时会立刻返回,动画则在"后台"执行,也就是方法会在动画之前完成,所以可以给动画方法添加第二个参数

$("#message").fadeIn("slow",function(){
    $(this).text("动画执行后再修改的内容");
});

四.jquery动画还可以传入一个对象来调用动画方法

//$("#message").fadeIn({
//    duration: "fast",
//    complete: function(){
//    $(this).text("动画执行后再修改的内容");
//});

五.简单动画fadeIn,fadeOut,fadeTo

需要传入一个opacity目标值,fadeTo会将元素的当前opacity值变化到目标值,调用fadeTo的方法时,第一参数必须是时长(或选项对象),第二参数是opacity目标值,回调函数是可选的第三个参数

$("#message").fadeTo("0.5","0.1");

　　　　　show,hide toggle

注意:fadeOut让元素不可见,但依然保留了隐藏元素在文档中的占位

　　hide方法则会将元素从布局中移除等同于display:none一样

toggle()可以改变在上面调用它的元素的可视状态,隐藏调用show(),显示则调用hide,必须传入时长或选线对象给toggle来产生动画效果,

参数true等同show(),参数false等同hide(),如果传入两个或多个函数参数给toggle(),则会注册为事件处理程序.

　　　　slideDown(),slideUp(),slideToggle()

slideUp()会因此jquery中的元素,将其高度变化到0,再设置display的属性为none,slideToggle()来切换可见性,

$("#img").click(function(){
$("#img").slideToggle("800");
});

$("#img").fadeOut().show(300).slideUp().slideToggle();
})

六.自定义动画

animate()有2个参数,

第一个是必须的,必须是一个css对象,该对象的属性指定要变化的css属性和他们的目标值.比如上面表述的slideUp()效果可以用一下代码代替

$("img").animate({height: 0px});

第二个参数是可选的,用来指定动画如何执行,可以传入一个选项对象给animate()方法

$("#btn").click(function(){
        $("#img").fadeIn(500).animate({"width:":"+=100"},{queue:false,duration:1000}).fadeOut(500);
    })

上面的fadeIn(500)和fadeOut效果是序列化的,但是animate的调用在1000毫秒内连续变化width属性是非队列化的,这段width动画和fadeIn的效果的开始时间相同,fadeOut的效果会在fadeIn效果完成时立刻开始,它不会等到width动画完成.

七.jquery缓动函数

实现方式一:

　　使用specialEasing 选项来指定自定义缓动函数

        $("#img").animate({"width":"hide","height":"hide",opacity:"hide"},
        {specialEasing:{width:"linear",height:"linear"}});

实现方式二:

　　在第一个对象参数中传入[目标值,缓动函数] 数组

$("#btn").click(function(){
        $("#img").animate({width:["hide","linear"],height:["hide","linear"],opacity:"hide"});
    });

八,动画的取消,延迟和队列

　　1.stop():停止选中元素上的当前正在执行的任何动画 stop():接受两个可选的布尔值参数,

　　　　如果第一个参数是true,会清除改选中元素上的动画队列:除了停止当前动画,还会取消任何等待执行的动画,第一个参数默认值是false:若忽略,等待执行的动画不会被取消.

　　　　第二个参数用来指定正在连续变化的css属性是否保留当前值,还是应该变化到最终目标值.true:变化到目标值;false:保持当前值

    $("#img").bind({mouseover:function(){$(this).stop().fadeTo(300,1.0)},
    mouseout:function(){$(this).stop().fadeTo(300,0.5)}
    });

　　2.delay(),第一参数时长,第二个参数是对列名(可选)

    $("#img").fadeTo(100,0.5).delay(200).slideUp();

在上面的列子中,添加短延迟,遮掩鼠标快速画过图片不停留时,不会有任何分神动画产生

$("#img").bind({mouseover:function(){$(this).stop(true).delay(100).fadeTo(300,1.0)},
    mouseout:function(){$(this).stop(true).fadeTo(300,0.5)}
    });

　　3.queque() 给队列追加函数

淡入显示一个元素,稍等片刻,是指一些文字,然后变化边框

$("#img").fadeIn().delay(200).queue(function(next){
    $(this).text("helloworld");
//    next();            //运行队列的下一项
$(this).dequeue();//用来代替next();
}).animate({height:"2px"});

　　4.clearQueue();清除追加的函数