Add delay using .each when adding class
-
20-12-2019 - |
سؤال
I'm trying to create a simple animation in which each letter would scale one by one. Would it be possible to have a 1 second delay when adding a class in each div? Here is what i have done at the moment : JSFiddle
HTML
<div class="animation">
<div>a</div>
<div>n</div>
<div>i</div>
<div>m</div>
<div>a</div>
<div>t</div>
<div>e</div>
</div>
CSS
.animate_letters{
float:left;
text-transform:uppercase;
font-size:80px;
display:inline;
margin-right:5px;
animation:fancytext 1s cubic-bezier(0.3, 2, 0.35, 1.45) 0s normal none 1;
}
@keyframes fancytext{
from {
transform: scale(0) translateX(-40%); opacity:0;
}
to {
transform: scale(1) translateX(0%); opacity:1;
}
}
JAVASCRIPT
$(document).ready(function(){
$.each( $('.animation'), function(i, animation){
$('div', animation).each(function(){
$(this).addClass('animate_letters')
})
})
})
المحلول
You can use setTimeout()
:
$(document).ready(function(){
$.each( $('.animation'), function(i, animation){
$('div', animation).each(function(ii){
var data = $(this);
setTimeout( function () {
$(data).addClass('animate_letters')
}, ii * 1000);
})})});
Update: also you dont need two .each()
. you can narrow it down to one .each()
using selector $('.animation div')
:
$(document).ready(function(){
$('.animation div').each(function(ii){
var data = $(this);
setTimeout( function () {
$(data).addClass('animate_letters')
}, ii * 1000);
})});
نصائح أخرى
Expanding on Milind Anantwar's answer, you need to use setTimeout
, but give each letter a different timeout:
$(document).ready(function(){
$('.animation').each(function(i, animation){
$('div', animation).each(function(j, div){
setTimeout(function() {
$(div).addClass('animate_letters');
}, 1000*j);
});
});
});
لا تنتمي إلى StackOverflow