使用 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);
};

Answer 2

您的基本设置和清除计时器...

//sets the timer for 1 second (same syntax as setInterval)
var timer = setTimeout(function() { ... }, 1000);

//clears the timer, the function will never get called.
clearInterval(timer);

如果您正在排队动画，最好使用回调函数而不是计时器，如下所示：

//#text1 will fadeOut immediately following it fading in.
$('#text1').fadeIn(function() {
  //occurs after the first animation is complete
  //this refers to #text1
  $(this).fadeOut();
});

希望这有帮助！

Answer 3

您可以通过利用 jquery 的动画队列来实现这种效果，如下

HTML:

<div id="myText"></div>

Javascript:

$(document).ready(function() {

    runIt();

});

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');
    })
    .fadeIn(1000)
    .delay(5000)
    .fadeOut(1000,function(){
        $(this).html('start again');
    });
};