CODEWITHSUNDEEP
jquerycss
Pierre Olivier Tran
Pierre Olivier Tran

Reputation: 1879

Change css with delay

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)

Upvotes: 1

Views: 74

Answers (1)

Atif Tariq
Atif Tariq

Reputation: 2772

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(); 
  });

Upvotes: 3

Related Questions