6

Animate divs individually loop with pause

 2 years ago
source link: https://www.codesd.com/item/animate-divs-individually-loop-with-pause.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Animate divs individually loop with pause

advertisements

I'm trying to get a looping animation with each box showing individually. To give you a better idea of exactly how the animation should work:

Nothing showing > Red box animates in, shown for 5 seconds > Red Box animates out > Pause for 10 seconds > Green Box animations in, shown for 5 seconds > etc.

I managed to accomplish this with a sort of complicated JQuery function, so I was hoping to post here and see if there was a more simple way to do this.

Link to JS Fiddle (The JS in this link is not working, but you can see what I started with)

<div id="container">
    <div id="red" class="box"></div>
    <div id="green" class="box"></div>
    <div id="blue" class="box"></div>
</div>


.box {
    width: 200px;
    height: 200px;
    animation: box .6s ease-in;
}

#red {
    background: red;
}

#green {
    background: green;
}

#blue {
    background: blue;
}

@keyframes box {
  0% {opacity: 0;transform: translateY(-40px);}
  100%{opacity: 1;transform: translateY(0px);}
}

This can be done very easily with jQuery promises:

var p = $.Deferred().resolve().promise();
$('div.box').each(function(i, div) {
  p = p.then(function() {
    $(div).fadeIn().delay(5000).fadeOut().delay(1000);
    return $(div).promise();
  });
});


var p = $.Deferred().resolve().promise();

$('div.box').each(function(i, div) {
  p = p.then(function() {
    $(div).fadeIn().delay(5000).fadeOut().delay(1000);
    return $(div).promise();
  });
});

.box {
  display: none;
  width: 200px;
  height: 200px;
  animation: box .6s ease-in;
}
#red {
  background: red;
}
#green {
  background: green;
}
#blue {
  background: blue;
}

@keyframes box {
  0% {opacity: 0;transform: translateY(-40px);}
  100%{opacity: 1;transform: translateY(0px);}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="red" class="box"></div>
  <div id="green" class="box"></div>
  <div id="blue" class="box"></div>
</div>

Looping it:

(function loop() {
  var p = $.Deferred().resolve().promise();
  $('div.box').each(function(i, div) {
    p = p.then(function() {
      $(div).fadeIn().delay(5000).fadeOut().delay(1000);
      return $(div).promise();
    });
  });
  p.then(loop);
}());


(function loop() {
  var p = $.Deferred().resolve().promise();
  $('div.box').each(function(i, div) {
    p = p.then(function() {
      $(div).fadeIn().delay(5000).fadeOut().delay(1000);
      return $(div).promise();
    });
  });
  p.then(loop);
}());

.box {
  display: none;
  width: 200px;
  height: 200px;
  animation: box .6s ease-in;
}
#red {
  background: red;
}
#green {
  background: green;
}
#blue {
  background: blue;
}

@keyframes box {
  0% {opacity: 0;transform: translateY(-40px);}
  100%{opacity: 1;transform: translateY(0px);}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="red" class="box"></div>
  <div id="green" class="box"></div>
  <div id="blue" class="box"></div>
</div>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK