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();清除追加的函數