Прервать и перезапустить последовательность событий setTimeOut с помощью jquery? - PullRequest
Новая
       20

Прервать и перезапустить последовательность событий setTimeOut с помощью jquery?

1 голос
/ 29 апреля 2011

Извините, если это не имеет смысла, я начинающий!

По сути, я пытаюсь заставить последовательность текстов постепенно исчезать, затем один за другим, пока, наконец, последний не появится и не останется статичным. Однако я хочу, чтобы последовательность была прервана, если пользователь перемещает мышь / клавиатуру до появления последнего текста. Мне бы хотелось, чтобы появился текст «Начать заново», а затем снова начать последовательность.

Это то, что я придумал до сих пор. Но я не уверен, как закодировать прерывание!

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>

Любая помощь действительно ценится! : -)

Ответы [ 3 ]

2 голосов
/ 29 апреля 2011

@ Сара Невозможно разместить код в комментарии назад, так что вы идете: 

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);
};
1 голос
/ 29 апреля 2011

Ваша основная настройка и очистка таймеров ... 

//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();
});

Надеюсь, это поможет!

0 голосов
/ 29 апреля 2011

Вы можете достичь этого эффекта, воспользовавшись анимационной очередью 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');
    });
};
...