資訊專欄INFORMATION COLUMN
摘要：，用于綁定兩個(gè)或多個(gè)事件處理器函數(shù)，以響應(yīng)被選元素的輪流的事件。用選擇器選中第二個(gè)，給它綁定事件，現(xiàn)在是顯示的，它會(huì)在一秒鐘之內(nèi)慢慢的隱藏，實(shí)現(xiàn)淡出效果。，通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡出效果。效果如下，，關(guān)閉頁(yè)面上所有的動(dòng)畫。
jQuery操作之效果
效果操作一共分五類：1.基本，2.滑動(dòng)，3.淡入淡出，4.自定義，5.設(shè)置
1. show()，hide()，toggle()
代碼如下：
html代碼：
jQuery代碼：
$("p").show();
開始P是隱藏的，執(zhí)行完這行代碼，P顯示
$("p").hide();
現(xiàn)在的P標(biāo)簽是顯示的，執(zhí)行完這行代碼P隱藏
$("#btn1").click(function(){
$("p").toggle("show");
})
給按鈕綁定一個(gè)click事件，當(dāng)P是現(xiàn)實(shí)的時(shí)候讓它隱藏，如果P是隱藏的，那就讓它顯示
注釋：show(),顯示隱藏的匹配元素。
hide()，隱藏顯示的元素。
toggle()，用于綁定兩個(gè)或多個(gè)事件處理器函數(shù)，以響應(yīng)被選元素的輪流的 click 事件。
slideDown()，slideUp()，slideToggle()
代碼如下：
html代碼：
jQuery代碼：
$("#btn1").click(function(){
$("div").slideDown();
});
給id為btn1的按鈕綁定click事件，當(dāng)點(diǎn)擊展開按鈕的時(shí)候，div向下展開。
$("#btn2").click(function(){
$("div").slideUp();
});
給id為btn2的按鈕綁定click事件，當(dāng)點(diǎn)擊展開按鈕的時(shí)候，div向上收縮。
$("#btn3").click(function(){
$("div").slideToggle();
});
給id為btn3的按鈕綁定click事件，當(dāng)div是向下展開的時(shí)候就向上收縮，反之。
注釋：slideDown(),向下展開。
slideUp(),向上收縮。
slideToggle(),通過(guò)高度變化來(lái)切換所有匹配元素的可見(jiàn)性。
效果如下：
fadeIn()，fadeOut()，fadeTo()，fadeToggle()
代碼如下：
html代碼：
jQuery代碼：
$("input").first().click(function(){
$("div").fadeIn(1000);
});
用選擇器選中第一個(gè)input，給它綁定click事件，div開始是隱藏的，它會(huì)在一秒鐘之內(nèi)慢慢的顯示出來(lái)，
實(shí)現(xiàn)淡入效果。
$("input").eq(1).click(function(){
$("div").stop().fadeOut(1000);
//$("div").fadeOut(1000);
});
用選擇器選中第二個(gè)input，給它綁定click事件，div現(xiàn)在是顯示的，它會(huì)在一秒鐘之內(nèi)慢慢的隱藏，實(shí)現(xiàn)
淡出效果。
$("input").eq(2).click(function(){
$("div").stop().fadeToggle(1000);
})
用選擇器選中第三個(gè)input，給它綁定click事件，當(dāng)div是顯示的時(shí)候，讓它淡出，反之，當(dāng)div是隱藏的時(shí)候，
讓它淡入。
$("input").eq(3).click(function(){
$("div").stop().fadeTo(1000,0.5);
})
用選擇器選中第四個(gè)input，給它綁定click事件，設(shè)置淡入（淡出）的時(shí)間和透明度。
注釋：fadeIn()，通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡入效果。
fadeOut()，通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡出效果。
fadeTo()，把所有匹配元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度。
fadeToggle()，通過(guò)不透明度的變化來(lái)開關(guān)所有匹配元素的淡入和淡出效果。
效果如下：
animate()，stop()，delay()
代碼如下：
css代碼：
div{
width:100px;
height:100px;
background:red;
}
html代碼：
ST宋澤
jQuery代碼：
$("#btn1").click(function(){
$("div").delay(2000).animate({
"width":"300px",
"height":"300px",
"font-size":"4em"
},5000,function(){
console.log("動(dòng)畫完成")
})
});
給id為btn1的按鈕綁定click事件，當(dāng)點(diǎn)擊按鈕的時(shí)候，延遲兩秒鐘，div的width，height，font-size會(huì)
逐漸變成設(shè)置的這些值，兩秒之后打印 “動(dòng)畫完成”。
$("#btn2").click(function(){
$("div").stop();
})
給id為btn2的按鈕綁定click事件，當(dāng)div正在做動(dòng)畫的時(shí)候，點(diǎn)擊按鈕，動(dòng)畫會(huì)停止。
注釋：animate()，用于創(chuàng)建自定義動(dòng)畫的函數(shù)。
stop()，停止所有在指定元素上正在運(yùn)行的動(dòng)畫。
delay()，設(shè)置一個(gè)延時(shí)來(lái)推遲執(zhí)行隊(duì)列中之后的項(xiàng)目。
效果如下：
jQuery.fx.off，jQuery.fx.interval
jQuery.fx.off，關(guān)閉頁(yè)面上所有的動(dòng)畫。
jQuery.fx.interval，設(shè)置動(dòng)畫的顯示幀速。
看完文章，是時(shí)候放松一下下了，嘻嘻！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87114.html
摘要：創(chuàng)建新元素的方法非常簡(jiǎn)單，只要把新元素直接傳入的構(gòu)造函數(shù)就行了七工具方法設(shè)計(jì)思想之六除了對(duì)選中的元素進(jìn)行操作以外，還提供一些與元素?zé)o關(guān)的工具方法。八事件操作設(shè)計(jì)思想之七，就是把事件直接綁定在網(wǎng)頁(yè)元素之上。 轉(zhuǎn)自：阮一峰 2011年7月26日 http://www.ruanyifeng.com/blo... jQuery是目前使用最廣泛的JavaScript函數(shù)庫(kù)。 據(jù)統(tǒng)計(jì)，全世界排名...
摘要：目前插件已超過(guò)幾千種，由來(lái)自世界各地的開發(fā)者共同編寫驗(yàn)證和完善。而對(duì)于開發(fā)者而言，直接使用這些插件將快速穩(wěn)定架構(gòu)系統(tǒng)，節(jié)約項(xiàng)目成本。也就是說(shuō)，插件也是代碼，通過(guò)文件引入的方式植入即可。現(xiàn)在我們就完成了一個(gè)下拉菜單的插件。 插件(Plugin)也成為 jQuery 擴(kuò)展(Extension)，是一種遵循一定規(guī)范的應(yīng)用程序接口編寫出來(lái)的程序。目前 jQuery 插件已超過(guò)幾千種，由來(lái)自世界...
摘要：可以傳遞三個(gè)參數(shù)表示一個(gè)或多個(gè)事件類型，比如。表示綁定到指定元素的處理函數(shù)。我們稱它為簡(jiǎn)寫事件。必須在中，并且使用作為事件觸發(fā)元素，不然無(wú)效。和表示鼠標(biāo)移入和移出的時(shí)候觸發(fā)。按下返回按下返回和分別表示光標(biāo)激活和丟失，事件觸發(fā)時(shí)機(jī)是當(dāng)前元素。 轉(zhuǎn)自個(gè)人博客 在JavaScript 有一個(gè)非常重要的功能，就是事件驅(qū)動(dòng)。如果你的網(wǎng)頁(yè)需要與用戶進(jìn)行交互的話，就不可能不用到事件。它在頁(yè)面完全加...
摘要：如果你的文件涉及操作，可以直接在里面添加回調(diào)函數(shù)，或者說(shuō)基本上我們的文件都可以寫在里面進(jìn)行調(diào)用其實(shí)，這和我們將文件放在底部，在上面加以及異步加載文件的效果是一樣一樣的。 如果大家想繼續(xù)看下面的內(nèi)容的話，有一個(gè)要求，就是回答我一個(gè)問(wèn)題:你這樣寫過(guò)代碼嗎？ window.onload = function(){ $(.gravatar).on(click,function(){ ...
摘要：是一款可愛(ài)的小插件，將和瀏覽器的封裝到一起，解決了單純使用進(jìn)行無(wú)刷新加載時(shí)對(duì)搜索引擎的不友好，并且節(jié)省了開支提高了瀏覽速度，明顯地優(yōu)化了用戶體驗(yàn)。是提供的，是對(duì)瀏覽器歷史對(duì)象的增強(qiáng)。 showImg(https://segmentfault.com/img/remote/1460000007640529?w=1008&h=569); pjax 是一款可愛(ài)的 jQuery 小插件，將 a...
閱讀 2960·2021-11-23 09:51
閱讀 3786·2021-11-22 15:29
閱讀 3244·2021-10-08 10:05
閱讀 1568·2021-09-22 15:20
閱讀 983·2019-08-30 15:56
閱讀 1081·2019-08-30 15:54
閱讀 741·2019-08-26 11:54
閱讀 2643·2019-08-26 11:32
