以下脚本第一次运行良好,但第二次(对我而言)有点奇怪
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 个都会破坏它。
最佳答案
问题出在这里
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 类,等等......
希望对您有所帮助。
关于jQuery 文本淡入/淡出循环问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35722154/