Ефекти часу jQuery

101

Я намагаюся, щоб елемент затухав, то через 5000 мс знову згасає. Я знаю, що можу зробити щось на кшталт:

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

Але це лише контролюватиме зникнення, чи додам я вище про зворотній виклик?

jquery timeout

— Кафлін
джерело

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

Можливо, ви можете використовувати синтаксис черги, це може працювати:

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

— Кент Фредрік
джерело

1

Мені цікаво, чому ви використовуєте чергу, коли також буде працювати просто використання setTimeout.

— SolutionYogi

33

тому що якщо ви користуєтеся чергою, її легко додавати нові події та повторно використовувати код, а повторне використання коду - це GoodThing ™

— Кент Фредрік

2

Зауважте, що також зазначено в документації API jQuery, delay () дійсно повинен використовуватися лише для речей, пов'язаних з чергою ефектів. Якщо вам потрібен тайм-аут для чогось іншого, setTimeout () - це все-таки шлях.

— scy

Вау, дякую за посилання @bottlenecked, я думаю , причину того, що мій приклад так схожий на нову функцію додається до JQuery є те , що є примітна ланцюг впливу від цієї відповіді на bugs.jquery.com/ticket/4102 = P

— Кент Фредрік

23

Я щойно зрозумів це нижче:

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

Я буду зберігати публікацію для інших користувачів!

— Кафлін
джерело

14

Чудовий хак від @strager. Реалізуйте його в jQuery так:

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

А потім використовуйте його як:

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

— Араш Мілані
джерело

11

Ви можете зробити щось подібне:

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

На жаль, ви не можете просто зробити .animate ({}, 2000) - Я думаю, що це помилка, і я повідомлять про це.

— більш сильний
джерело

7

Бен Алман написав солодкий плагін для jQuery під назвою doTimeout. У ньому багато приємних особливостей!

Перевірте це: jQuery doTimeout: Як setTimeout, але краще .

— Ясон
джерело

5

Щоб мати можливість ним користуватися таким чином, вам потрібно повернутися this. Без повернення fadeOut ('повільний') не отримає об'єкт для виконання цієї операції.

Тобто:

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

Потім зробіть це:

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

— користувач128026
джерело

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/

— DaveAlger
джерело