Change css with delay

Question

Is there a way to delay a change on CSS in jQuery?

Using this code, I manage to fade elements in one after another :

$(".crea-card").each(function(index) {
   $(this).delay(400*index).fadeIn(300);
});

But using this one, the CSS effects are all applied at the same time:

$(".crea-card").each(function(index) {
      $(this).delay(400*index).css('opacity', 1);
      $(this).delay(400*index).css('transform', 'translate(0,0)');
});

How can I delay them so that the opacity is set to 1 one after another?

(I know the CSS and jQuery don't behave the same)

xpy · Accepted Answer · 2016-03-21 17:32:32Z

3

Use it like this:

$(".crea-card").each(function(index) {
  .delay(800)
  .queue(function (next) { 
    $(this).css('opacity', 1); 
    $(this).css('transform', 'translate(0,0)');
    next(); 
  });

edited Mar 21, 2016 at 17:32

xpy

5,6713 gold badges32 silver badges52 bronze badges

answered Mar 21, 2016 at 17:30

Atif Tariq

2,7701 gold badge31 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

Change css with delay

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related