jQuery .fadeIn 同时发生

Question

我尝试使用 jQuery 制作横幅广告，我在相同位置使用了 4 张以 display: none 开头的图像，然后我尝试淡入第一张图像然后淡出，依此类推其中的 4 张。

这是我构建的代码:

    $('.aaa').fadeIn(length);
    $('.aaa').fadeOut(length);
    $('.aab').fadeIn(length);
    $('.aab').fadeOut(length);
    $('.aac').fadeIn(length);
    $('.aac').fadeOut(length);
    $('.aad').fadeIn(length);
    $('.aad').fadeOut(length);

它确实淡入淡出，但所有图像同时淡出，看起来很奇怪，有人知道如何让它们分别淡出吗？

Answer 1

如果它们是有序的并且共享一个类，你可以遍历每个显示它然后淡出的类

var imgs = $('.common').toArray();

 function disp_next() {
   $(imgs.shift()).fadeIn()
   .delay(1000)
   .fadeOut(function(){
     if(imgs.length !== 0) {
         disp_next();
     }
  })
 }

disp_next();

如果它们不能共享一个公共(public)类或任何其他方式将它们全部放在一个 jQuery 选择器中，您可以使用 fadeIn 和 fadeOut 的回调函数>/p>

$('.aaa').fadeIn(function(){
    $('.aaa').fadeOut(function(){
        $('.aab').fadeIn(function(){
            $('.aab').fadeOut();
        })
    })
})