jQuery 文本淡入/淡出循环问题

Question

以下脚本第一次运行良好，但第二次(对我而言)有点奇怪

HTML:

<div class='one'>Some text here</div>
<div class='two'>More text here</div>
<div class='three'>Third line of text</div>
<div class="four">another line</div>

CSS:

div.two{ display:none}
div.three{ display:none}
div.four{ display:none}

还有 JS:

window.switchOne = function () {
    $('.three').fadeToggle(function() {
        $('.one').fadeToggle(function() {
            setTimeout(window.switchTwo, 500);
        });
    });

}

window.switchTwo = function () {
    $('.one').fadeToggle(function() {
        $('.two').fadeToggle(function() {
            setTimeout(window.switchThree, 500);
        });
    });
}

window.switchThree = function () {
    $('.two').fadeToggle(function() {
        $('.three').fadeToggle(function() {
            setTimeout(window.switchFour, 500);
        });
    });
}



window.switchFour = function () {
    $('.three').fadeToggle(function() {
        $('.four').fadeToggle(function() {
            setTimeout(window.switchOne, 500);
        });
    });
}



setTimeout(window.switchTwo(), 500)

这是我创建的代码笔: http://codepen.io/anon/pen/yOyKwp

我错过了什么？

更新

奇怪的是，如果我将它保持在只有 3 个 div 效果很好

http://codepen.io/anon/pen/LNEmZP

所以任何超过 3 个都会破坏它。

Answer 1

问题出在这里

window.switchOne = function () {
    $('.three').fadeToggle(function() {
        $('.one').fadeToggle(function() {
            setTimeout(window.switchTwo, 500);
        });
    });

}

应该是

window.switchOne = function () {
    $('.four').fadeToggle(function() {
        $('.one').fadeToggle(function() {
            setTimeout(window.switchTwo, 500);
        });
    });

}

因为最后可见的是 .four 类所以你需要 fadeToggle 类 .four 而不是 .three

所以如果你有 5 个 div，第 5 个 div 有一个类 .five，你的 window.switchOne 应该 fadeToggle .five 类，等等......

希望对您有所帮助。