CODEWITHSUNDEEP
jquery
Lieutenant Dan
Lieutenant Dan

Reputation: 8284

simple 500 delay and then re-loop all fadeIn > fadeOuts continuously

I have the below simple jQuery chain timed fadeIn and fadeOuts. These occur initially, on page load. I am simply trying to make these loop continuously, the loop would restart after a 500 delay. I have tried wrapping all this in a single time out function, but that breaks it.

  $('.item').delay(500).fadeIn(1500);
  $('.item').delay(2000).fadeOut(500);
  $('.item2').delay(5000).fadeIn(1500);
  $('.item2').delay(500).fadeOut(500);
  $('.item3').delay(9000).fadeIn(1500);
  $('.item4').delay(500).fadeOut(500);

Upvotes: 0

Views: 90

Answers (1)

Coffee coder
Coffee coder

Reputation: 162

I believe this is what you are trying to achieve, hope it helps!

jQuery:

var play = function(){
  $('.item').delay(500).fadeIn(1500);
  $('.item').delay(2000).fadeOut(500);
  $('.item2').delay(5000).fadeIn(1500);
  $('.item2').delay(500).fadeOut(500);
  $('.item3').delay(9000).fadeIn(1500);
  $('.item3').delay(500).fadeOut(500, play);
  }
play();

HTML:

<img class="item" src="https://www.gravatar.com/avatar/5d3b6a26fd3e42722d24791603ee8e68/?default=&s=64">
<img class="item1" src="http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg">
<img class="item2" src="http://static.adzerk.net/Advertisers/0932cfed3e374852a27a09c2ed27061c.png">
<img class="item3" src="https://assets.servedby-buysellads.com/p/manage/asset/id/32052">

CSS:

.item, .item1, .item2, .item3{
  display:  none;
  width: 300px;
  height: 300px;
}

Upvotes: 2

Related Questions