Interrupt and restart a setTimeOut sequence of events with jquery? -


sorry if makes no sense, complete beginner!

basically trying sequence of texts fade in out 1 after other until last 1 appears , stays static. however, want sequence interrupted if user moves mouse/keyboard before last text has appeared. i'd text "begin again" appear , sequence begin again.

this i've come far. i'm not sure how code interruption!

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> 

any appreciated! :-)

@sarah unable post code in comment here ya go:

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

Comments