jquery中動態(tài)效果小結(jié)
動畫效果，如果綜合使用，還能使用簡單的代碼簡單實(shí)現(xiàn)jquery的各種插件的效果
本文參考《《淺談jquery》一書，加以整理，并結(jié)合自己的實(shí)際經(jīng)驗而成，可以看做一個 學(xué)習(xí)手冊吧
編輯的時候代碼全亂了，重新整理了下，可能代碼格式還是有點(diǎn)亂，請見諒
顯示（show），隱藏(hide)與組合（toggle）效果
1.show(speed,callback);
說明：這個方法可以顯示隱藏的元素，其中參數(shù)也缺省，即寫成show()這種形式
speed ---指定顯示的速度 有3個參數(shù)可以選擇 slow ,normal,fast,也可以自己指定數(shù)字（單位：毫秒）
callback---回調(diào)函數(shù)
下面是一個簡單的例子
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代碼
<input type="button" value="show" id="b1"/> <div id="t1" style="display: none;border: 1px solid gray;">dd</div>
2 hidden(speed,callback);
說明：相反與show方法，用于隱藏元素，參數(shù)與show相同，請參考3.1
下面的例子是點(diǎn)擊一個按鈕，隱藏顯示的div
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代碼
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>
3 toggle(speed,callback)
說明：這個可以理解為show()與hide()方法的結(jié)合體，輪換執(zhí)行show()與hide()
比如：頁面有一個隱藏的元素，第一次執(zhí)行toggle()，顯示元素，第二次執(zhí)行，隱藏元素，第三次則又顯示元素。。。
參數(shù)與3.1,相同
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代碼
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>
二.元素的滑動效果（向下展開，向上收縮）
1.slideDown(speed,[callback]);
說明：改變對象的height以實(shí)現(xiàn)向下展開的動畫效果，常用與顯示隱藏的元素
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代碼
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>
2.slideUp(speed,[callback]););
說明：改變對象的height以實(shí)現(xiàn)向上展開的動畫效果，常用隱藏顯示的元素
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);
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>
3.slideToggle(speed,[callback]););
說明：可以說是以上2個方法的綜合體，可替代toggle();如果你是仔細(xì)看了上面的幾個方法介紹，就應(yīng)該知道怎么用了,其實(shí)這幾個方法的用法和參數(shù)都是相同的，只是展現(xiàn)的形式不同，例子我就不寫了吧
三 元素的淡入淡出效果
1.fadeIn(speed,[callback]);
說明：實(shí)現(xiàn)淡出效果，用于顯示隱藏元素
2.fadeOut(speed,[callback]);
說明：實(shí)現(xiàn)淡入效果，用于隱藏顯示的元素
3，fadeTo(speed,opactity,callback);
說明：該方法用于更改顯示元素的透明度
參數(shù)：speed，callback于上面介紹的其他動畫方法參數(shù)相同，opactity參數(shù)表示透明度，取值范圍為0-1
var callback=function(){
//alert("我是回調(diào)函數(shù)");
} ;
var f1=function(){ $("#t1").fadeTo(1000,0.3,callback);//0.3為透明度30%
};
$("#b1").click(f1);
<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,實(shí)際需要中我們還可以自定義一些動畫效果
自定義動畫使用方法：animate(params,speed,callback);
參數(shù)說明：params---一組包含作為動畫屬性和最終值哦樣式屬性和其值的集合
speed----同前面介紹方法中的speed屬性
callback---回調(diào)函數(shù)
注意：params的樣式屬性必須書寫成駝峰形式，即比如margin-left應(yīng)該些微marginLeft的形式
下面是一個例子
var callback=function(){
//alert("我是回調(diào)函數(shù)");
} ;
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>
相關(guān)文章
最近在做一個項目，需要一個在線視頻播放的功能，在度娘上找了許多都不是太理想，就動手寫了一個，分享給大家2014-10-10
jQuery Easyui加載表格出錯時在表格中間顯示自定義的提示內(nèi)容
這篇文章主要介紹了jQuery Easyui加載表格出錯時在表格中間顯示自定義的提示內(nèi)容的相關(guān)資料,需要的朋友可以參考下2016-12-12
基于jQuery實(shí)現(xiàn)文字打印動態(tài)效果
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)文字打印動態(tài)效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
jquery實(shí)現(xiàn)類似淘寶星星評分功能有截圖
本節(jié)主要介紹了jquery實(shí)現(xiàn)類似淘寶星星評分功能，經(jīng)測試效果相當(dāng)不錯，有圖有真相，喜歡的朋友可以參考下2014-09-09
漢化英文版的Dreamweaver CS5并自動提示jquery
如果從Adobe Dreamweaver CS5的官網(wǎng)上下載了一個Adobe Dreamweaver CS5，那么Adobe Dreamweaver CS5默認(rèn)你是英文版的，我們中國人還是比較習(xí)慣看漢字的。2010-11-11
淺談jQuery綁定事件會疊加的解決方法和心得總結(jié)
下面小編就為大家?guī)硪黄獪\談jQuery綁定事件會疊加的解決方法和心得總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了jQuery中的編程范式,以實(shí)例形式詳解分析了jQuery中的編程范式,并對比分析了與Prototype的異同及對應(yīng)用法,非常具有實(shí)用價值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了JQuery中queue方法用法,結(jié)合實(shí)例形式分析了queue方法操作函數(shù)隊列相關(guān)技巧與注意事項,需要的朋友可以參考下2019-01-01
本文通過代碼給大家介紹了jquery實(shí)現(xiàn)鍵盤回車搜索功能，前臺代碼和搜索按鈕實(shí)現(xiàn)代碼都給大家貼出了，需要的朋友參考下吧2017-07-07
本篇文章主要介紹了jQuery輸入框密碼顯示隱藏代碼的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04