延遲加載元素jQuery

所以我有一個列表li我試圖去載入一個接一個的元素。延遲加載元素jQuery

所以你點擊頁面，第一個從左邊使用css transform: translateX()移動並淡入。然後下一個，等等。

我index.html樣子：

<div class="list_wrapper"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
    <li>Item 8</li> 
    <li>Item 9</li> 
</div>

我有幾個樣式，添加背景圖片和顯示模塊等，以獲得li標籤排隊並排的一面，但我還沒有加入他們因爲我不想讓這個問題太長。

編輯：

我li標籤中的每一個有風格，以進一步的開始他們留下這樣的負載移動它們像這樣：transform: translateX(-10%);

我的jQuery：

$(function() { 
    $('.list_wrapper li').each(function(i) { 
    $(this).delay((i++) * 500).css({ 
     'opacity': '1', 
     'transform': 'translateX(0%)' 
    }) 
    }) 
});

每當我點擊該頁面，立即將樣式添加到li標籤。它不會執行我試圖通過的jQuery delay。

來源

2016-02-25 PourMeSomeCode

你爲什麼不使用setTimeout如此簡單，試試這個

$('button').click(function(){ 
 
    $('li').each(function(i){ 
 
    setTimeout(function(){ 
 
     $('li').eq(i).css({ 
 
     \t 'transform': 'translateX(0%)', 
 
     'opacity': 1 
 
     }); 
 
    }, 1000*i) 
 
    }) 
 
})

li{ 
 
    transition: all 0.7s ease-in-out; 
 
    transform: translateX(-10%); 
 
    opacity: 0 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="list_wrapper"> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
    <li>Item 6</li> 
 
    <li>Item 7</li> 
 
    <li>Item 8</li> 
 
    <li>Item 9</li> 
 
</div> 
 
<button>ok</button>

來源

2016-02-25 11:39:39 Gintoki

OP ..儘快接受它！ ;） – codisfy

歡呼的人！這工作。我會盡快接受答案:) code下面的答案也幫助了我。我誤解了如何使用jQuery'delay'方法 – PourMeSomeCode

由於手冊中提到這裏

在隊列中只有隨後的事件被延遲;例如，這將不延遲.show（）或.hide（）的無參數形式，其中不使用效果隊列。

所以你不能使用.delay()你打算，一個setTimeout可能在你試圖達到的效果幫助的方式，由下一個李發送要展示給功能setTimeOut

更多來自說明書

.delay（）方法最適合延遲排隊的jQuery 效果。因爲它是有限的 - 例如，它不提供一種方式來取消延遲 - .delay（）不是替代JavaScript的原生 setTimeout函數，這可能更適合某些使用的情況。

來源

2016-02-25 11:37:17 codisfy

乾杯的人！這有助於澄清爲什麼'delay（）'沒有按照我認爲應該做的那樣操作 – PourMeSomeCode

您可以使用的setTimeout（）代替：

$('.list_wrapper li').each(function(i) { 
    var $item = $(this); 
     setTimeout(function() { 
     $item.css({ 
      'opacity': '1', 
      'transform': 'translateX(0%)' 
     }); 
     }, (i + 1) * 500); 
});

來源

2016-02-25 11:44:39

延遲加載元素jQuery

回答

相關問題