各メソッドを使用して値をインクリメントする属性を挿入する

Question

私はすべてのリスト項目に遅延アニメーションの属性を挿入するためにjQueryを使用しています。アニメーションの遅れを100ms増やしたい。ここで

は私のコード

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

私は遅延を参照してくださいいけないと私はコンソールのエラーを取得していないよ、任意のアイデアですか？

おかげ

Answer 1

$(this).attr('data-aos-delay', 'delayNumber')は、あなたが'delayNumber'を使用している場合、それは値属性に "delayNumber" を書き、ないでしょう$(this).attr('data-aos-delay', 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>

Answer 2

、あなたは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>