Question

我在列表中有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);

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

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

Answer 2

这个怎么样：

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>

ADAPTED FROM：https://stackoverflow.com/a/14875852/1845408

Answer 3

＆＃13;

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)

＆＃13;

img {
  display:none;
}

＆＃13;

<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" />

＆＃13;

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

3 个答案: