jQuery: animate dynamic elements using CSS?

Question

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:

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?

Serg Chernata · Accepted Answer · 2017-03-13 17:25:36Z

1

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/

answered Mar 13, 2017 at 17:25

Serg Chernata

12.4k6 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Hope Over a year ago

Perfecto amigo :) appreciate it.

Collectives™ on Stack Overflow

jQuery: animate dynamic elements using CSS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related