在循环中显示/隐藏2个具有3种不同内容的div

Question

当我需要制作这个脚本时，我对Jquery有问题：

我在网站上有2个div，我必须在周期中更改其内容。我有3种不同的内容。

计划功能：

1.第一个内容显示在左侧div 2.隐藏最后一个节目，并在右侧显示第二个内容 3.隐藏最后一个节目，并在左侧div中显示第三个内容 4.隐藏最后一个节目，并在右侧显示第一个内容 5.隐藏最后一个节目并在左侧div中显示第二个内容 6.隐藏最后一个节目并在右侧显示第三个内容 而这些仍处于循环中，逻辑上有一些延迟。有一段时间我只需要看一个内容。

因为我需要fadin / fadeout效果，所以我需要JQuery，而不仅仅是JS。 我的各种尝试都失败了，显示它是不值得的。

有人可以帮助我吗？

Answer 1

fadeOut和fadeIn都接受一旦动画完成就会触发的回调函数。您可以使用它们以循环方式激活动画。

function cycle() {
    // determine current and next element
    current.fadeOut(function() {
        next.fadeIn(cycle);
    });
}

Demo

当前状态也可能是order数组中固有的，它可能比上面有index变量的解决方案更整洁。

Demo