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
Post a Comment