按顺序淡入淡出图像

Question

我想要实现的目标是按顺序淡入淡出图像，但将其设置为第一个开始，然后是下一个，然后是下一个，以便连续淡入淡出。

这里有一个链接，告诉我我已经走了多远。

http://bwnew.users34.interdns.co.uk/

这是我的代码，它的工作原理但我想要稍微停顿一下，以便从左向右流动。

<script type="text/javascript">
$('#slider img:gt(0)').hide();
$('#slider2 img:gt(0)').hide();
$('#slider3 img:gt(0)').hide();

a=0;
b=0;
c=0;


setInterval(function() {

        $("#slider img").eq(a).fadeOut();
        if(a==$('#slider img').length-1)
            a=0;
        else
            a++;
$("#slider img").eq(a).fadeIn();


$("#slider2 img").eq(b).fadeOut();
        if(b==$('#slider2 img').length-1)
            b=0;
        else
            b++;
$("#slider2 img").eq(b).fadeIn();


$("#slider3 img").eq(c).fadeOut();
        if(c==$('#slider3 img').length-1)
            c=0;
        else
            c++;
$("#slider3 img").eq(c).fadeIn();


}, 3000);

Answer 1

最简单但明确：

$('#slider img').fadeIn(function(){
  $('#slider2 img').fadeIn(function(){
    $('#slider3 img').fadeIn();
  });
});

Answer 2

非常感谢，这是工作代码，

只需尝试去掉空格即可。

http://bwnew.users34.interdns.co.uk/

<script type="text/javascript">
$('#slider img:gt(0)').hide();
$('#slider2 img:gt(0)').hide();
$('#slider3 img:gt(0)').hide();

a=0;
b=0;
c=0;

setInterval(function() {                 

$("#slider img").eq(a).fadeOut();
        if(a==$('#slider img').length)
            a=0;
        else
            a++;

$("#slider2 img").eq(b).fadeOut();
        if(b==$('#slider2 img').length)
            b=0;
        else
            b++;

$("#slider3 img").eq(c).fadeOut();
        if(c==$('#slider3 img').length)
            c=0;
        else
            c++;

$("#slider img").eq(a).fadeIn(function(){
  $("#slider2 img").eq(b).fadeIn(function(){
    $("#slider3 img").eq(c).fadeIn();
  });
}); 


}, 3000);


</script>