只需引入jqery.js,不需要引入插件，利用jquery定義的一些基本方法，就能實現諸如隱藏，顯示，淡入，淡出，半透明等

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

?

本文參考《《淺談jquery》一書，加以整理，并結合自己的實際經驗而成，可以看做一個 學習手冊吧
編輯的時候代碼全亂了，重新整理了下，可能代碼格式還是有點亂，請見諒
顯示（show），隱藏(hide)與組合（toggle）效果
1.show(speed,callback);

?

?

?

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

??? speed ---指定顯示的速度 有3個參數可以選擇 slow ,normal,fast,也可以自己指定數字（單位：毫秒）
??? callback---回調函數

下面是一個簡單的例子

Js代碼 ?

var?callback=function(){?//alert("我是回調函數");??

?}??

?var?f1=function(){???

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

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

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

};??

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

?

?

Html代碼 ?

<input?type="button"?value="show"?id="b1"/>?<div?id="t1"?style="display:?none;border:?1px?solid?gray;">dd</div>??

?

?

?

2 hidden(speed,callback);

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

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

?

?

Js代碼 ?

var?callback=function(){?//alert("我是回調函數");???

}???

var?f1=function(){???

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

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

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

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

?

Html代碼 ?

???

??

<input?type="button"?value="show"?id="b1"/>?<div?id="t1"?style="border:?1px?solid?gray;">dd</div>??

??

???

?

3 toggle(speed,callback)

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

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

參數與3.1,相同

Js代碼 ?

var?callback=function(){?//alert("我是回調函數");???

}??

?var?f1=function(){??

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

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

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

};???

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

??

??

???

?

Html代碼 ?

<input?type="button"?value="show"?id="b1"/>?<div?id="t1"?style="border:?1px?solid?gray;">dd</div>??

??

???

?

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

1.slideDown(speed,[callback]);

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

?

?

Js代碼 ?

var?callback=function(){?//alert("我是回調函數");?}??

?var?f1=function(){??

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

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

Js代碼 ?

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

?};??

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

?

?

Html代碼 ?

<input?type="button"?value="show"?id="b1"/>?<div?id="t1"?style="border:?1px?solid?gray;">dd</div>??

??

???

?

?

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

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

?

?

Js代碼 ?

var?callback=function(){???

//alert("我是回調函數");???

}???

Js代碼 ?

var?f1=function(){???

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

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

Js代碼 ?

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

;??

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

?

?

?

Js代碼 ?

<input?type="button"?value="show"?id="b1"/>?<div?id="t1"?style="border:?1px?solid?gray;">dd</div>??

?

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

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

三 元素的淡入淡出效果

1.fadeIn(speed,[callback]);?

說明：實現淡出效果，用于顯示隱藏元素

2.fadeOut(speed,[callback]);

說明：實現淡入效果，用于隱藏顯示的元素

?

3，fadeTo(speed,opactity,callback);

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

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

?

?

Js代碼 ?

var?callback=function(){??

?//alert("我是回調函數");???

}?;??

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

};???

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

?

Js代碼 ?

<input?type="button"?value="show"?id="b1"/>?<div?id="t1"?style="border:?1px?solid?gray">dd</div>??

??

???

?

?

?

?

?四.自定義動畫

?

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

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

?

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

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

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

???????????????? callback---回調函數

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

下面是一個例子

Js代碼 ?

var?callback=function(){???

//alert("我是回調函數");???

}?;??

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

var?f1=function(){??

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

};???

??

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

??

???

?

?

Html代碼 ?

<input?type="button"?value="show"?id="b1"/>?<div?id="t1"?style="border:?1px?solid?gray">dd</div>??

??

??

轉載于:https://www.cnblogs.com/webu/archive/2012/11/28/2791943.html

總結

以上是生活随笔為你收集整理的jquery中动态效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。