Hiệu ứng jQuery hết giờ

101

Tôi đang cố làm cho một phần tử mờ dần đi, sau đó trong 5000 mili giây lại mờ dần trở lại. Tôi biết tôi có thể làm điều gì đó như:

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

Nhưng điều đó sẽ chỉ kiểm soát sự mờ dần, tôi sẽ thêm phần trên vào lệnh gọi lại?

jquery timeout

— Coughlin
nguồn

197

Cập nhật: Kể từ jQuery 1.4, bạn có thể sử dụng .delay( n )phương pháp này. http://api.jquery.com/delay/

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

Lưu ý : $.show()và $.hide()theo mặc định không được xếp hàng đợi, vì vậy nếu bạn muốn sử dụng $.delay()với chúng, bạn cần định cấu hình chúng theo cách:

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

Bạn có thể sử dụng cú pháp Hàng đợi, điều này có thể hoạt động:

jQuery(function($){ 

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

});

hoặc bạn có thể thực sự khéo léo và tạo một hàm jQuery để làm điều đó.

(function($){ 

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

mà (về lý thuyết, hoạt động trên bộ nhớ ở đây) cho phép bạn làm điều này:

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

— Kent Fredric
nguồn

1

Tôi tự hỏi tại sao bạn lại sử dụng hàng đợi trong khi cách sử dụng đơn giản của setTimeout cũng sẽ hoạt động.

— SolutionYogi,

33

bởi vì nếu bạn sử dụng hàng đợi, nó dễ dàng để thêm các sự kiện mới và tái sử dụng mã này, và tái sử dụng mã là một GoodThing ™

— Kent Fredric

2

Lưu ý rằng, như cũng đã nêu trong tài liệu API jQuery, delay () thực sự chỉ nên được sử dụng cho những thứ liên quan đến hàng đợi hiệu ứng. Nếu bạn cần thời gian chờ cho việc khác, setTimeout () vẫn là cách để thực hiện.

— scy

Chà, cảm ơn vì liên kết @bottlenecked, tôi đoán lý do khiến ví dụ của tôi rất giống với tính năng mới được thêm vào jQuery là do câu trả lời này có một chuỗi ảnh hưởng đáng chú ý đến bug.jquery.com/ticket/4102 = P

— Kent Fredric,

23

Tôi chỉ tìm ra nó dưới đây:

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

Tôi sẽ giữ bài viết cho những người dùng khác!

— Coughlin
nguồn

14

Hack tuyệt vời bởi @strager. Triển khai nó vào jQuery như thế này:

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

Và sau đó sử dụng nó như:

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

— Arash Milani
nguồn

11

Bạn có thể làm điều gì đó như sau:

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

Đáng buồn thay, bạn không thể chỉ làm .animate ({}, 2000) - Tôi nghĩ đây là một lỗi và sẽ báo cáo nó.

— người đi lạc
nguồn

7

Ben Alman đã viết một plugin ngọt ngào cho jQuery có tên là doTimeout. Nó có rất nhiều tính năng hay!

Hãy xem tại đây: jQuery doTimeout: Giống như setTimeout, nhưng tốt hơn .

— thợ nề
nguồn

5

Để có thể sử dụng nó như vậy, bạn cần trở lại this . Nếu không có trả về, fadeOut ('chậm'), sẽ không nhận được một đối tượng để thực hiện thao tác đó.

I E:

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

Sau đó làm điều này:

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

— người dùng128026
nguồn

1

Điều này có thể được thực hiện chỉ với một vài dòng 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);
});

xem fiddle bên dưới để biết ví dụ hoạt động ...

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

— DaveAlger
nguồn