使用每種方法注入屬性與遞增值

我使用jQuery注入延遲動畫屬性到每個列表項。我想在動畫的延遲中增加100ms。使用每種方法注入屬性與遞增值

這裏是我的代碼

$('.project-item').each(function(index){ 
    var delayNumber = index * 100; 
    $(this).attr('data-aos-delay', 'delayNumber') 
})

我沒有看到的延遲，我沒有得到控制檯的錯誤，任何想法？

感謝

來源

2017-05-31 James H

嘗試'$（本）.attr（ '數據AOS延遲'，delayNumber）'，你不需要的''''左右delayNumber' –

詹姆斯沒有幫助？ –

謝謝！工作 –

$(this).attr('data-aos-delay', 'delayNumber')應該$(this).attr('data-aos-delay', delayNumber)

如果使用'delayNumber'它會寫「delayNumber」的屬性，而不是價值。

$('.project-item').each(function(index){ 
 
    var delayNumber = index * 100; 
 
    $(this).attr('data-aos-delay', delayNumber).text(delayNumber) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="project-item"></div> 
 
<div class="project-item"></div> 
 
<div class="project-item"></div> 
 
<div class="project-item"></div> 
 
<div class="project-item"></div>

來源

2017-05-31 08:19:28

在這裏，你使用JQuery的延遲和排隊。希望能幫助到你！

$('li').each(function(index){ 
 
    $(this).delay(index * 500).queue(function() { 
 
     $(this).addClass("animated bounce"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
 

 
<ul> 
 
    <li> Project Item </li> 
 
    <li> Project Item </li> 
 
    <li> Project Item </li> 
 
    <li> Project Item </li> 
 
    <li> Project Item </li> 
 
</ul>

來源

2017-05-31 09:54:51

使用每種方法注入屬性與遞增值

回答

相關問題