简单500延迟然后重新循环所有fadeIn＆gt; fadeOuts不断

Question

我有以下简单的jQuery链定时fadeIn和fadeOut s。这些最初在页面加载时发生。我只是试图连续循环，循环会在500延迟后重新启动。我已经尝试将所有这些包装在一个超时功能中，但这会破坏它。

  $('.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);

Answer 1

我相信this是你想要实现的目标，希望它有所帮助！

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