CODEWITHSUNDEEP
javascriptjquerycssanimation
David Hope
David Hope

Reputation: 1536

jQuery: animate dynamic elements using CSS?

I'm trying to animate the elements on my page using jquery and CSS.

The elements are created dynamically thus using jquery.

The issue that i have is that the elements do not animate properly at all. they are actually blinking and go and back/forth and then animating which is not wanted.

This is a working fiddle to explain the issue better:

https://jsfiddle.net/npvsrkcy/12/

This is the sort of animation I'm trying to achieve:

enter image description here

This is my entire jquery code:

$.each($('.images '), function(i, el){
    $(el).css({'opacity':0});
    setTimeout(function(){
       $(el).animate({

         '-webkit-animation-delay': i+'s',
         'animation-delay': i+'s',
         'opacity':1.0
       }, 450);
    },500 + ( i * 500 ));
//add delay 3s 
i+1000;
});

Could someone please advise on this issue?

Upvotes: 1

Views: 152

Answers (1)

Serg Chernata
Serg Chernata

Reputation: 12400

This should be a good starting point for the effect you're looking for.

I moved the animation into a class. There's no need to specify css animation delay. Applying the class within the loop and timeout is all we need.

$.each($('.images '), function(i, el){
    setTimeout(function(){
       $(el).addClass('animate');
    },500 + ( i * 500 ));
//add delay 3s 
i+1000;
});

https://jsfiddle.net/8kpzwtoz/

Upvotes: 1

Related Questions