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)

这是我创建的一个codepen： 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 not .three

所以，如果你有5个div，其中第5个div有一个类.five，你的window.switchOne应该是fadeToggle .five类，依此类推......

希望它有所帮助。

Answer 2

Try This and also check your first codepen I have made changes:-

window.switchOne = function () {
    $('.four').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);

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

2 个答案: