在 runIt 之前等待 5 秒（而不是单击）？

Question

目前，单击会启动我的代码中的序列。我想更改它，以便“重新开始”淡入，出现 5 秒，然后淡出，并运行序列的其余部分。

完全初学者！我不知道该怎么做。有什么帮助吗？

$(document).ready(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').unbind('mouseenter mouseleave');
  })
  .fadeIn(1000);
};

Answer 1

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

延迟函数无法正确清除，因此我使用静态动画来伪造延迟（在本例中为剩余动画）。

Answer 2

Javascript 有几个函数可以用于此目的：setTimeout() 和 setInterval()。这是一篇关于它们的好文章： http://www.elated .com/articles/javascript-timers-with-settimeout-and-setinterval/

因此，在您的情况下，您需要从 setTimeout() 或设置间隔（）：

setTimeout('runit()', 5000);

Answer 3

我没有测试过，但这更接近您想要的...请注意，runIt() 已移至外部函数。

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

Answer 4

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

Answer 5

这是经过全面测试且可工作的代码，进行了一些更改，您可以根据需要对其进行更改。

希望这有帮助。

编辑：如果你想停止事件，你应该使用 .stop() 而不是 .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.
                            });
                        });
                    });
                });
            });
        });
    });
    };
});