Тайм-аут эффекты jQuery

Question

Я пытаюсь заставить элемент исчезнуть, затем через 5000 мс снова исчезнуть. Я знаю, что могу сделать что-то вроде:

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

Но это будет только контролировать затухание. Могу ли я добавить вышеупомянутое в обратном вызове?

Answer 1

Обновление: Начиная с 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});

---

Возможно, вы можете использовать синтаксис очереди, это может сработать:

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'); 

Answer 2

Я только что понял это ниже:

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

Я сохраню пост для других пользователей!

Answer 3

Отличный взлом @strager. Реализуйте это в jQuery так:

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

А затем используйте его как:

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

Answer 4

Вы можете сделать что-то вроде этого:

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

К сожалению, вы не можете просто сделать .animate ({}, 2000) - я думаю, что это ошибка, и я сообщу об этом.

Answer 5

Бен Алман написал замечательный плагин для jQuery под названием doTimeout. У него много приятных функций!

Проверьте это здесь: jQuery doTimeout: как setTimeout, но лучше .

Answer 6

Чтобы иметь возможность использовать его таким образом, вам нужно вернуть this. Без возврата fadeOut ('slow') не получит объект для выполнения этой операции.

т.е:.

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

Тогда сделайте это:

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

Answer 7

Это можно сделать всего несколькими строчками 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/