jQuery 慢慢淡入淡出，暂停，然后重复答案

【问题标题】：jQuery slowly fade in and out, pause, and then repeatjQuery 慢慢淡入淡出，暂停，然后重复
【发布时间】：2015-05-15 00:35:56
【问题描述】：

我在列表中有 4 张图像，我想慢慢淡出，然后淡入，然后移至下一张，并重复直到回到时间。所以我基本上需要使用这段代码，但是让它暂停，直到其他3个完成，然后再做一次。

我该怎么做呢？

$('#image1').animate({ opacity: 1/3 }, 500);
$('#image1').animate({ opacity: 1 }, 1000);
$('#image2').animate({ opacity: 1/3 }, 2000);
$('#image2').animate({ opacity: 1 }, 2500);
$('#image3').animate({ opacity: 1/3 }, 3500);
$('#image3').animate({ opacity: 1 }, 4000);
$('#image4').animate({ opacity: 1/3 }, 5000);
$('#image4').animate({ opacity: 1 }, 5500);

如何循环播放？这是最好的方法吗？

【问题讨论】：

尝试使用 .queue() 。可以在 Question 中包含html 吗？
褪色使用api.jquery.com/fadeTo
您想要一个接一个地为图像制作动画还是什么？是的，正如@erkaner 所说，我们需要你的 HTML 来更快地解决它
@shershen 更新问题

标签： javascript jquery

【解决方案1】：

见http://jsfiddle.net/8uysuv3q/

$(".fade").each(function(index) {
    $(this).delay(800*index).fadeTo(200, 0.5).fadeTo(200, 1).fadeTo(200, 0.5).fadeTo(200, 1);
});

【讨论】：

它不会循环——如果它循环了，那就完美了

【解决方案2】：

function fadeInOutList($elements, duration, delay) {
     if(!$elements.size()) return
     
     $elements.first().fadeIn(duration, function() {
       setTimeout(function() {
          $elements.first().fadeOut(duration, function() {
             fadeInOutList($elements.slice(1), duration, delay)
          })
       }, delay)
     })
}


fadeInOutList($('img'), 500, 1000)

img {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://vk.com/images/gifts/256/71.jpg" />
<img src="http://images.math.cnrs.fr/IMG/png/section8-image.png" />
<img src="http://vk.com/images/gifts/256/44.jpg" />
<img src="http://breckon.eu/toby/fundipbook/materials/gallery/cameraman.jpg" />

【讨论】：

您的示例中没有任何内容 - 看起来不起作用。

【解决方案3】：

这个怎么样：

var speed = 2000;
run = setInterval("switchSlide()", speed);
$(document).ready(function() {

  $('#caption').html($('#slideshow img:first').attr('title'));

  $('#slideshow img:gt(0)').hide();
});

function switchSlide() {
  $('#slideshow img:first').fadeOut(1000).next().show().end().appendTo('#slideshow');
  $('#caption').html($('#slideshow img:first').attr('title'));
}

#slideshow {
  width: 700px;
  height: 400px;
  padding: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid;
}
#slideshow img {
  position: absolute;
  height: 500px;
  width: 700px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
  <img src="http://icons.iconarchive.com/icons/fasticon/nature/256/Pink-Flower-icon.png" title="test1" />
  <img src="http://icons.iconarchive.com/icons/fasticon/nature/256/Blue-Flower-icon.png" title="test2" />
  <img src="http://icons.iconarchive.com/icons/fasticon/nature/256/Red-Flower-icon.png" title="test3" />
</div>

改编自：https://stackoverflow.com/a/14875852/1845408

【讨论】：

嘿erkaner，你知道你可以在你的答案中使用StackSnippets吗？
它应该是第 7 个按钮（在图片旁边），如果你按下快捷键 ctrl+m 就会出现。如果您将鼠标悬停在工具栏按钮上，则称为“code sn-p”。