Wait 5 seconds (instead of click) before runIt?

currently a click initates the sequence in my code. I'd like to change it so that "Start Again" fades in, appears for 5 seconds, then fades out and the rest of the sequence runs.

Complete beginner! I'm not sure how to do that. Any help?

$(document).ready(runIt);

});


function runIt(){
$('#myText').hover(开发者_JAVA技巧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('mouseenter mouseleave');
  })
  .fadeIn(1000);
};

$(function(){
  $(window).mousemove(function(){
    runIt();
  });
  runIt();      
})

function runIt() {
  var it = $('#myText');
  it.stop(true,true).clearQueue().fadeOut(1).animate({left:0},500).queue(function(){
    it.html('Start Again');
    it.dequeue();
  })
  it.fadeIn(500).animate({left:0},5000).fadeOut(1000).queue(function(){
    it.html('test 1');
    it.dequeue();
  })
  it.fadeIn(1000).animate({left:0},5000).fadeOut(1000).queue(function(){
    it.html('test 2');
    it.dequeue();
  })
  it.fadeIn(1000).animate({left:0},5000).fadeOut(1000).queue(function(){
    it.html('test 3');
    $(window).unbind('mousemove');
    it.dequeue();
  })
  it.fadeIn(1000);
}

The delay function does not get cleared properly so I used a static animation to fake a delay (animate left in this case).

Javascript has a couple of functions that you can use for this: setTimeout() and setInterval(). Here's a good post on them: http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

So in your case, instead of calling runit() based on a click you will need to call it from setTimeout() or setInterval():

setTimeout('runit()', 5000);

I've not tested but this is closer to what you want... note that runIt() has been moved to an external function.

$(function () {
  $('#myText').hover(function(){
      $(this).clearQueue().html('Start Again');
    }).click(function(){  runIt();  });
  });


function runIt() {
  $(this)
    .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('mouseenter mouseleave');
    })
    .fadeIn(1000);
};

$(window).ready(function()
{
    setTimeout("runIt();", 5000);
});

Here is a fully tested and working code with a few changes, you can make changes to it to what ever you'd like.

hope this helps.

edit: if you wish to stop events you should use .stop() and not .clearQueue()

    (function($) {

    jQuery.fn.idle = function(time) {
        $(this).animate({
            opacity: '+=0'
        }, time);
        return this;
    };
})(jQuery);



$(document).ready(function() {
    runIt();
    function runIt() {
    $('#myText').idle(5000).text('Start Again').fadeOut(5000, function() {
        $(this).text('text 1');
        $(this).fadeIn(1000, function() {
            $(this).fadeOut(5000, function() {
                $(this).text('text 2');
                $(this).fadeIn(1000, function() {
                    $(this).fadeOut(5000, function() {
                        $(this).text('text 3');
                        $(this).fadeIn(1000, function() {
                            $(this).fadeOut(5000, function() {
                                //runIt();
                                //uncomment the above if you want a loop.
                            });
                        });
                    });
                });
            });
        });
    });
    };
});