這篇文章逐一介紹Jquery data()、Jquery stop()、jquery delay()函數(詳)的相關資料,需要的朋友可以參考下
首先給大家介紹jquery data()函數
jQuery中data()函數用于向被選元素附加數據，或者從被選元素獲取數據。通過data()函數存取的數據都是臨時數據，一旦頁面刷新，之前存放的數據都將不復存在。
一、jquery data()的作用
data() 方法向被選元素附加數據，或者從被選元素獲取數據。
通過data()函數存取的數據都是臨時數據，一旦頁面刷新，之前存放的數據都將不復存在。
該函數屬于jQuery對象(實例)。如果需要移除通過data()函數存放的數據，請使用 removeData() 函數。
二、jquery data的使用方式
1、獲取附加的data的值
$(selector).data(name)
參數說明
name：
可選。規定要取回的數據的名稱。
如果沒有規定名稱，則該方法將以對象的形式從元素中返回所有存儲的數據。
2、用name和value為對象附加數據
$(selector).data(name,value)
參數說明
selector：為需要附加或者獲取數據的對象。
name：參數為數據的名稱。
value：參數為數據的值。
3、使用對象向元素附加數據
使用帶有名稱/值對的對象向被選元素添加數據。
除了以提供 name 和 value 的方式進行賦值，我們還可以直接傳入另一個對象( “another” )作為參數。這種情況下，“another” 的屬性名稱和屬性值將被視為多個鍵值對，從中提取的 “name” 和 “value” 都會被復制到目標對象的緩存中。
$(selector).data(object)
參數說明
object：必需。規定包含名稱/值對的對象。
實例
- <html>
- <head>
- <script type="text/javascript">
- $(document).ready(function(){
- testObj=new Object();
- testObj.greetingMorn="Good Morning!";
- testObj.greetingEve="Good Evening!";
- $("#btn1").click(function(){
- $("div").data(testObj);
- });
- $("#btn2").click(function(){
- alert($("div").data("greetingEve"));
- });
- });
- </script>
- </head>
- <body>
- <button id="btn1">把數據添加到 div 元素</button><br />
- <button id="btn2">獲取已添加到 div 元素的數據</button>
- <div></div>
- </body>
- </html>
接著給大家介紹jquery stop()函數
jQuery中stop()函數用于停止當前匹配元素上正在運行的動畫。默認情況下，stop()函數只會停止當前正在運行的動畫。如果你使用animate()函數為當前元素設置了A、B、C這3段動畫，如果當前正在執行的動畫是A，則只會停止動畫A的執行，不會阻止動畫B和C的執行。當然，你也可以通過指定可選的選項參數來停止所有的動畫。
jQuery中stop()函數用于停止當前匹配元素上正在運行的動畫。
停止動畫并不是恢復到該動畫執行前的狀況，而是直接停止，當前動畫執行到什么狀態，就停留在什么狀態。
例如：執行一個元素高度從100px到200px的過渡動畫，當高度為150px時停止了該動畫，則當前高度仍然保持150px的現狀。如果該動畫設置了執行完畢后的回調函數，則不會執行該回調函數。
一、jquery stop()語法
$(selector).stop(stopAll,goToEnd)
參數說明
1、stopAll
可選。代表是否要清空未執行完的動畫隊列。
意思就是如果該參數值為true，則會停止所有后續動畫或事件。如果該參數值為false，則只停止被選元素當前執行的動畫，后續動畫不受影響。因此，該參數一般都為false。
如果使用stop()方法，則會立即停止當前正在運行的動畫，如果接下來還有動畫等待執行，則以當前狀態開始接下來的動畫。
2、goToEnd
可選。代表是否直接將正在執行的動畫跳轉到當前動畫的末尾。
規定是否允許完成當前動畫，該參數只能在設置了stopAll參數時使用
3、備注
默認情況下，不寫參數，則會被認為兩個參數都是false。
二、jquery stop()實例
HTML 代碼示例
- <!DOCTYPE>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>jquery stop()</title>
- <script type="text/javascript">
- $(function(){
- $("button:eq(0)").click(function(){
- $("#panel").animate({height:"150" }, 1000).animate({width:"300" },
- 1000).hide(2000).animate({height:"show", width:"show", opacity:"show" }, 1000).animate({height:"500"},
- 1000);
- });
- //stop([clearQueue][,gotoEnd]);
- //語法結構
- $("button:eq(1)").click(function(){
- $("#panel").stop();//停止當前動畫，繼續下一個動畫
- });
- $("button:eq(2)").click(function(){
- $("#panel").stop(true);//清除元素的所有動畫
- });
- $("button:eq(3)").click(function(){
- $("#panel").stop(false, true);//讓當前動畫直接到達末狀態 ，繼續下一個動畫
- });
- $("button:eq(4)").click(function(){
- $("#panel").stop(true, true);//清除元素的所有動畫，讓當前動畫直接到達末狀態
- });
- })
- </script>
- </head>
- <body>
- <button>開始一連串動畫</button>
- <button>stop()</button>
- <button>stop(true)</button>
- <button>stop(false,true)</button>
- <button>stop(true,true)</button>
- <div id="panel">
- <h5 class="head">什么是jQuery?</h5>
- <div class="content">
- jQuery。
- </div>
- </div>
- </body>
- </html>
實例說明
1、點擊按鈕(stop())，由于兩個參數都是false。所以點擊發生時，animater沒有跳到當前動畫(動畫1)的最終效果，而直接進入動畫2，然后動畫3，4，5.直至完成整個動畫。
2、點擊按鈕(stop(true))，由于第一個是true，第二個是false，所以animater立刻全部停止了，動畫不動了。
3、點擊按鈕(stop(false,true))，由于第一個是false，第二個是true，所以點擊發生時，animater身處的當前動畫(動畫1)停止并且animater直接跳到當前動畫(動畫1)的最終末尾效果位置，接著正常執行下面的動畫(動畫2，3，4，5)，直至完成整個動畫。
3、點擊按鈕(stop(true，true))，由于兩個都是true，所以點擊發生時，animater跳到當前動畫(動畫1)的最終末尾效果位置，然后，全部動畫停止。
三、jquery stop()在工作中的應用
一個下拉菜單，當鼠標移上去的時候就菜單顯示，當鼠標離開的時候菜單隱藏 ，如果我快速不斷地將鼠標移入移出菜單(即，當菜單下拉動畫未完成時，鼠標又移出了菜單)就會產生“動畫積累"，當鼠標停止移動后，積累的動畫還會持續執行，直到動畫序列執行完畢。
解決方法
在寫動畫效果的代碼前加入stop(true，true)，這樣每次快速的移入移出菜單，就正常了，當移入一個菜單的時候，停止所有加入隊列的動畫，完成當前的動畫(跳至當前動畫的最終效果位置)。
最后給大家介紹jquery delay()
jquery中delay()方法的功能是設置一個延時值來推遲動畫效果的執行，它的調用格式為：$(selector).delay(duration)其中參數duration為延時值，它的單位是毫秒，當超過延時值時，動畫繼續執 ，delay與setTimeout函數還是有區別的，delay是更適合某些使用情況。
可以將隊列中等待執行的下一個動畫延遲指定的時間后才執行。它常用在隊列中的兩個jQuery效果函數之間，從而在上一個動畫效果執行后延遲下一個動畫效果的執行時間。
一、語法
$(selector).delay(speed,queueName)
1、參數說明
2、備注
延時時間(duration參數)是以毫秒為單位的，數值越大，動畫越慢，不是越快。
字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。
二、delay()實例
HTML
- <p>動畫效果：
- <select id="animation">
- <option value="1">動畫1</option>
- <option value="2">動畫2</option>
- <option value="3">動畫3</option>
- <option value="4">動畫4</option>
- </select>
- <input id="exec" type="button" value="執行動畫" >
- </p>
- <div id="myDiv" style="width:300px; height: 100px; background-color: #eee;">CodePlayer</div>
- <script>
- $("#exec").click( function(){
- var v = $("#animation").val();
- var $myDiv = $("#myDiv");
- if(v == "1"){
- $myDiv.slideUp( 1000 )
- .delay( "slow" )
- .fadeIn( 1500 );
- }else if(v == "2"){
- $myDiv.fadeOut( "slow" )
- .delay( 2000 )
- .slideDown( 1000 )
- .animate( { height: "+=300" } );
- }else if(v == "3"){
- /*
- 注意：只有動畫才會被加入效果隊列中
- 以下代碼實際上只有slideUp()、slideDown()會加入效果隊列
- delay()的延遲只對slideDown()起作用
- show()在被調用時就立即執行了(此時slideUp的動畫效果尚未執行結束)
- 以下代碼的執行順序時：
- 1、slideUp()被加入隊列、開始執行，
- 2、show()也開始執行，它立即執行完畢，此時slideUp()的動畫尚未執行結束
- 3、延遲2秒
- 4、執行SlideDown()
- */
- $myDiv.slideUp( "slow" )
- .delay( 2000 )
- .show( ) // 它不是一個效果動畫
- .slideDown( );
- }else if(v == "4"){
- $myDiv.show()
- .delay( 2000 )
- // 在現有高度的基礎上增加300px (如果原來是100px，增加后就是400px)
- .animate( { height: "+=300px" }, 2000 )
- .animate( { width: "50%" }, 1000 )
- .animate( { width: "200px", height: "100px" }, 1000 );
- }
- } );
- </script>
實例二、讓頁面中的按鈕在頁面加載后500毫秒隱藏，然后再過1500毫秒顯示出來
- $(function(){
- var $inputs = $('input[type=button]')
- .delay(500)
- .queue(function(){$(this).hide().dequeue();})
- .delay(1500)
- .queue(function(){$(this).show();});
- });
三、jquery中使用delay()注意事項
1、delay適用在jQuery動畫效果和類似隊列中
2、如果下一項是動畫效果，則會執行延遲調用
3、如果不是效果動畫，則它不會被加入效果隊列中，因此該函數不會對它進行延遲調用。
4、如果要將不是動畫效果加入延遲，則需要將它加入到queue隊列中去。
例如
- $(function(){
- var $inputs = $('input[type=button]')
- .delay(500)
- .queue(function(){$(this).hide();})
- .delay(1500)
- .show(1);
- //.queue(function(){$(this).show();});
- });
備注：上面方法只隱藏，不會再顯示，queue執行完后，也中止了動畫隊列的繼續執行，需要調用dequeue使其執行下去
又如
- $(function(){
- var $inputs = $('input[type=button]')
- .delay(500)
- .queue(function(){$(this).hide().dequeue();})
- .delay(1500)
- .show();
- //.show(1);
- });
備注：上面方法也是只隱藏，而不會再顯示!這里show不再指定顯示動畫時長，則show方法不再是一個動畫。由此可知，dequeue只能使得動畫隊列中的后續方法執行下去，不能使非動畫隊列中的jquery方法繼續執行!
新聞熱點
疑難解答
圖片精選
