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

【问题标题】：Wait 5 seconds (instead of click) before runIt?在 runIt 之前等待 5 秒（而不是单击）？
【发布时间】：2011-04-30 15:37:54
【问题描述】：

目前，单击会在我的代码中启动序列。我想改变它，让“重新开始”淡入，出现 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);
};

【问题讨论】：

标签： jquery wait

【解决方案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);
}

延迟功能没有正确清除，所以我使用静态动画来伪造延迟（在本例中为左侧动画）。

【讨论】：

您好，谢谢！我正在测试它，但由于某种原因未能让它工作......就我想要发生的事情而言：我希望有一系列文本在屏幕上自动淡入淡出，但如果用户移动鼠标我希望序列被“重新开始”打断。如果他们到达最后一个文本，我希望它保留在屏幕上并且不受鼠标移动的影响。
当您说移动鼠标时，您是指屏幕上的任意位置还是动画文本所在的元素上方？另外，当你说用“重新开始”打断时，你的意思是动画被重置了
@TheBendArrow 是的，在屏幕上的任何地方，如果可能的话，也可以进行任何击键。是的，动画被重置。基本上我想要这个网站上的东西：donothingfor2minutes.com .. 除了不是计时器而是有一些消息淡入淡出。
我刚刚更新了代码以反映您刚刚提供的信息。试一试。
谢谢，真是太棒了！效果很好！是否有可能以某种方式让另一个 div 淡入“test 1”文本而不是淡出它，留在屏幕上然后淡出“test 2”？

【解决方案2】：

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

因此，在您的情况下，您需要从 setTimeout() 或 setInterval() 调用它，而不是根据点击调用 runit()：

setTimeout('runit()', 5000);

【讨论】：

【解决方案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);
};

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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.
                            });
                        });
                    });
                });
            });
        });
    });
    };
});

【讨论】：