Utilisation de chaque méthode pour injecter un attribut avec une valeur d'incrémentation

Question

J'utilise jQuery pour injecter un attribut d'animation de délai dans chaque élément de liste. Je veux incrémenter 100ms dans le délai d'animation.

Voici mon code

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

Je ne vois pas le retard et je reçois pas d'erreur de la console, des idées?

Merci

Answer 1

$(this).attr('data-aos-delay', 'delayNumber') doivent être $(this).attr('data-aos-delay', delayNumber)

si vous utilisez 'delayNumber' écrirait "delayNumber" dans l'attribut, et non la valeur.

$('.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

Ici, vous utilisez retard et la file d'attente de JQuery. J'espère que cela aide!

$('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>