Блог

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

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

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

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>
  

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

@Sarah Не удалось опубликовать код в ответном комментарии, так что давай:

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

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

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

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

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