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

我失踪了什么？

UPDATE

奇怪的是，如果我保持它只有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); 
     }); 
    }); 

} 

因为最后一个可见的是类。四，所以你需要fadeToggle类。四不。三

所以如果你有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);