jquery中動態(tài)效果

　　動畫效果，如果綜合使用，還能使用簡單的代碼簡單實現(xiàn)jquery的各種插件的效果

　　本文參考《《淺談jquery》一書，加以整理，并結(jié)合自己的實際經(jīng)驗而成，可以看做一個 學(xué)習(xí)手冊吧

　　編輯的時候代碼全亂了，重新整理了下，可能代碼格式還是有點亂，請見諒

　　顯示（show），隱藏(hide)與組合（toggle）效果

　　1.show(speed,callback);

　　說明：這個方法可以顯示隱藏的元素，其中參數(shù)也缺省，即寫成show()這種形式

　　speed ---指定顯示的速度 有3個參數(shù)可以選擇 slow ,normal,fast,也可以自己指定數(shù)字（單位：毫秒）

　　callback---回調(diào)函數(shù)

　　下面是一個簡單的例子

　　復(fù)制代碼 代碼如下:

　　var callback=function(){ //alert("我是回調(diào)函數(shù)");

　　}

　　var f1=function(){

　　// $("#t1").show(); 參數(shù)缺省

　　// $("#t1").show("fast",callback); 顯示速度為fast方式

　　$("#t1").show(3000,callback);//自定義顯示速度 3000毫秒

　　};

　　$("#b1").click(f1);

　　Html代碼

　　復(fù)制代碼 代碼如下:

　　dd

　　2 hidden(speed,callback);

　　說明：相反與show方法，用于隱藏元素，參數(shù)與show相同，請參考3.1

　　下面的例子是點擊一個按鈕，隱藏顯示的div

　　復(fù)制代碼 代碼如下:

　　var callback=function(){ //alert("我是回調(diào)函數(shù)");

　　}

　　var f1=function(){

　　// $("#t1").hide(); 參數(shù)缺省

　　// $("#t1").hide("fast",callback); 顯示速度為fast方式

　　$("#t1").hide(3000,callback);//自定義顯示速度 3000毫秒

　　}; $("#b1").click(f1);

　　Html代碼

　　復(fù)制代碼 代碼如下:

　　dd

　　3 toggle(speed,callback)

　　說明：這個可以理解為show()與hide()方法的結(jié)合體，輪換執(zhí)行show()與hide()

　　比如：頁面有一個隱藏的元素，第一次執(zhí)行toggle()，顯示元素，第二次執(zhí)行，隱藏元素，第三次則又顯示元素。。。

　　參數(shù)與3.1,相同

　　復(fù)制代碼 代碼如下:

　　var callback=function(){ //alert("我是回調(diào)函數(shù)");

　　}

　　var f1=function(){

　　//$("#t1").toggle(); // 參數(shù)缺省

　　//$("#t1").toggle("fast",callback); //顯示速度為fast方式

　　$("#t1").toggle(3000,callback);

　　};

　　$("#b1").click(f1);

　　Html代碼

　　復(fù)制代碼 代碼如下:

　　dd

　　二.元素的滑動效果（向下展開，向上收縮）

　　1.slideDown(speed,[callback]);

　　說明：改變對象的height以實現(xiàn)向下展開的動畫效果，常用與顯示隱藏的元素

　　復(fù)制代碼 代碼如下:

　　var callback=function(){ //alert("我是回調(diào)函數(shù)"); }

　　var f1=function(){

　　//$("#t1").slideDown(); // 參數(shù)缺省

　　//$("#t1").slideDown("fast",callback); //顯示速度為fast方式

　　$("#t1").slideDown(1000,callback);

　　};

　　$("#b1").click(f1);

　　Html代碼

　　復(fù)制代碼 代碼如下:

　　dd

　　2.slideUp(speed,[callback]););

　　說明：改變對象的height以實現(xiàn)向上展開的動畫效果，常用隱藏顯示的元素

　　復(fù)制代碼 代碼如下:

　　var callback=function(){

　　//alert("我是回調(diào)函數(shù)");

　　}

　　var f1=function(){

　　//$("#t1").slideUp();

　　// 參數(shù)缺省 //$("#t1").slideUp("fast",callback); //顯示速度為fast方式

　　$("#t1").slideUp(1000,callback);

　　};

　　$("#b1").click(f1);

　　dd

　　3.slideToggle(speed,[callback]););

　　說明：可以說是以上2個方法的綜合體，可替代toggle();如果你是仔細(xì)看了上面的幾個方法介紹，就應(yīng)該知道怎么用了,其實這幾個方法的用法和參數(shù)都是相同的，只是展現(xiàn)的形式不同，例子我就不寫了吧

　　三 元素的淡入淡出效果

　　1.fadeIn(speed,[callback]);

　　說明：實現(xiàn)淡出效果，用于顯示隱藏元素

　　2.fadeOut(speed,[callback]);

　　說明：實現(xiàn)淡入效果，用于隱藏顯示的元素

　　3，fadeTo(speed,opactity,callback);

　　說明：該方法用于更改顯示元素的透明度

　　參數(shù)：speed，callback于上面介紹的其他動畫方法參數(shù)相同，opactity參數(shù)表示透明度，取值范圍為0-1

　　復(fù)制代碼 代碼如下:

　　var callback=function(){

　　//alert("我是回調(diào)函數(shù)");

　　} ;

　　var f1=function(){ $("#t1").fadeTo(1000,0.3,callback);//0.3為透明度30%

　　};

　　$("#b1").click(f1);

　　dd

　　四.自定義動畫

　　說明：從前面一，二，三可以看到，元素的顯示有show,slideDown,fadeIn,隱藏有hide,slideUp,fadeOut的動畫效果

　　，組合效果toggle,slideToggle,更改透明度效果fadeTo,實際需要中我們還可以自定義一些動畫效果

　　自定義動畫使用方法：animate(params,speed,callback);

　　參數(shù)說明：params---一組包含作為動畫屬性和最終值哦樣式屬性和其值的集合

　　speed----同前面介紹方法中的speed屬性

　　callback---回調(diào)函數(shù)

　　注意：params的樣式屬性必須書寫成駝峰形式，即比如margin-left應(yīng)該些微marginLeft的形式

　　下面是一個例子

　　復(fù)制代碼 代碼如下:

　　var callback=function(){

　　//alert("我是回調(diào)函數(shù)");

　　} ;

　　var par={ height:"70%" };

　　var f1=function(){

　　$("#t1").animate(par,1000,callback);

　　};

　　$("#b1").click(f1);

　　Html代碼

　　復(fù)制代碼 代碼如下:

　　dd

【jquery中動態(tài)效果】相關(guān)文章：

jQuery中prev()方法用法07-16

jQuery中replaceAll()方法用法10-15

jQuery中parent()和siblings()的問題10-16

jQuery程序設(shè)計08-05

jquery提交按鈕的代碼07-28

淺析jQuery 遍歷函數(shù)javascript08-06

如何理解jquery事件冒泡09-15

jQuery的DOM操作筆記07-29

jQuery 源碼分析和Ready函數(shù)06-28

讓你我減少對jQuery的依賴度07-21