jquery - 使用 jquery 中断并重新启动 setTimeOut 事件序列？

Question

抱歉，如果这没有意义，我是一个完全的初学者!

基本上，我试图让一系列文本逐渐淡入然后淡出，直到最后一个文本出现并保持静态。但是，如果用户在最后一个文本出现之前移动鼠标/键盘，我希望序列被中断。我希望出现“重新开始”文本，然后重新开始序列。

这是我到目前为止所想到的。但我不知道如何编写中断代码!

Javascript:

    $(document).ready(function() {

    setTimeout( "jQuery('#text1').fadeIn();",1000 );
    setTimeout( "jQuery('#text1').fadeOut();",5000 );
    setTimeout( "jQuery('#text2').fadeIn();",6000 );
    setTimeout( "jQuery('#text2').fadeOut();",10000 );
    setTimeout( "jQuery('#text3').fadeIn();",11000 );
    setTimeout( "jQuery('#text3').fadeOut();",15000 );
    setTimeout( "jQuery('#text4').fadeIn();",16000 );
    setTimeout( "jQuery('#text4').fadeOut();",20000 );
    setTimeout( "jQuery('#text5').fadeIn();",21000 );

});

CSS:

.hidden {
display: none;
}

HTML:

<div id="startagain" class=hidden">Start Again!</div>
<div id="text1" class="hidden">Text 1</div>
<div id="text2" class="hidden">Text 2</div>
<div id="text3" class="hidden">Text 3</div>
<div id="text4" class="hidden">Text 4</div>
<div id="text5" class="hidden">Text 5</div>

非常感谢任何帮助! :-)

Answer 1

@莎拉无法在评论中发布代码，所以在这里:

function runIt(){
$('#myText').hover(function(){
        $(this).clearQueue().html('Start Again');

    })
    .click(function(){
        runIt();
    })
    .html('text 1')
    .fadeIn(1000)
    .delay(5000)
    .fadeOut(1000,function(){
        $(this).html('text 2');
    })
    .fadeIn(1000)
    .delay(5000)
    .fadeOut(1000,function(){
        $(this).html('text 3').unbind('hover');
    })
    .fadeIn(1000);
};