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

Javascript有几个可用于此的函数：setTimeout（）和setInterval（）。这是一篇很好的帖子：http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

所以在你的情况下，不是根据点击调用runit（），而是需要从setTimeout（）或setInterval（）调用它：

setTimeout('runit()', 5000);

Answer 2

我没有测试，但这更接近你想要的...请注意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 3

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

Answer 4

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

希望这会有所帮助。

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

Answer 5

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

延迟功能无法正确清除，因此我使用静态动画伪造延迟（在这种情况下留下动画）。

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

5 个答案: