101

我试图让一个元素淡入，然后在 5000 毫秒内再次淡出。我知道我可以做类似的事情：

setTimeout(function () { $(".notice").fadeOut(); }, 5000);

但这只会控制淡出，我会在回调中添加上述内容吗？

4

7 回答 7

197

更新：从 jQuery 1.4 开始，您可以使用该.delay( n )方法。http://api.jquery.com/delay/

$('.notice').fadeIn().delay(2000).fadeOut('slow');

注意：默认情况下不排队，所以如果你想和它们一起使用$.show()，你需要这样配置它们：$.hide()$.delay()

$('.notice')
    .show({duration: 0, queue: true})
    .delay(2000)
    .hide({duration: 0, queue: true});

您可以使用 Queue 语法，这可能有效：

jQuery(function($){ 

var e = $('.notice'); 
e.fadeIn(); 
e.queue(function(){ 
  setTimeout(function(){ 
    e.dequeue(); 
  }, 2000 ); 
}); 
e.fadeOut('fast'); 

});

或者你可以非常巧妙地制作一个 jQuery 函数来完成它。

(function($){ 

  jQuery.fn.idle = function(time)
  { 
      var o = $(this); 
      o.queue(function()
      { 
         setTimeout(function()
         { 
            o.dequeue(); 
         }, time);
      });
  };
})(jQuery);

这将（理论上，在这里处理内存）允许您这样做：

$('.notice').fadeIn().idle(2000).fadeOut('slow');
于 2008-11-25T06:34:53.173 回答
23

我只是在下面想通了：

$(".notice")
   .fadeIn( function() 
   {
      setTimeout( function()
      {
         $(".notice").fadeOut("fast");
      }, 2000);
   });

我会为其他用户保留帖子！

于 2008-11-25T03:26:20.543 回答
14

@strager 的绝妙技巧。像这样将它实现到jQuery中：

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

然后将其用作：

$('.notice').fadeIn().wait(2000).fadeOut('slow');
于 2010-12-03T18:00:52.373 回答
11

你可以这样做：

$('.notice')
    .fadeIn()
    .animate({opacity: '+=0'}, 2000)   // Does nothing for 2000ms
    .fadeOut('fast');

可悲的是，你不能只做 .animate({}, 2000) - 我认为这是一个错误，并将报告它。

于 2008-11-25T03:36:48.120 回答
7

Ben Alman 为 jQuery 编写了一个不错的插件，名为 doTimeout。它有很多不错的功能！

在这里查看：jQuery doTimeout：类似于 setTimeout，但更好。

于 2010-02-13T15:49:34.320 回答
5

为了能够这样使用它，您需要 return this。如果没有返回，fadeOut('slow') 将无法获得执行该操作的对象。

IE：

  $.fn.idle = function(time)
  {
      var o = $(this);
      o.queue(function()
      {
         setTimeout(function()
         {
            o.dequeue();
         }, time);
      });
      return this;              //****
  }

然后这样做：

$('.notice').fadeIn().idle(2000).fadeOut('slow');
于 2009-07-10T16:17:20.747 回答
1

只需几行 jQuery 就可以做到这一点：

$(function(){
    // make sure img is hidden - fade in
    $('img').hide().fadeIn(2000);

    // after 5 second timeout - fade out
    setTimeout(function(){$('img').fadeOut(2000);}, 5000);
});​

请参阅下面的小提琴以获取工作示例...

http://jsfiddle.net/eNxuJ/78/

于 2012-05-31T16:58:44.280 回答