시간 초과 jQuery 효과

시간 초과 jQuery 효과

요소를 페이드 인(fade in)한 다음 5000ms 내에 페이드 아웃(fade out)하려고 합니다.다음과 같은 작업을 수행할 수 있습니다.

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

하지만 그렇게 하면 페이드 아웃만 제어할 수 있는데, 콜백에 위 내용을 추가할까요?

업데이트: 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'); 

나는 방금 아래에서 그것을 이해했습니다.

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

다른 사용자들을 위해 게시물을 보관하겠습니다!

@strager의 훌륭한 해킹.다음과 같이 jQuery에 구현합니다.

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

다음과 같이 사용합니다.

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

다음과 같은 작업을 수행할 수 있습니다.

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

슬프게도, 당신은 그냥 .animate({, 2000)를 할 수 없습니다 -- 저는 이것이 버그라고 생각합니다, 그리고 그것을 보고할 것입니다.

Ben Alman은 doTimeout이라고 불리는 jQuery를 위한 달콤한 플러그인을 작성했습니다.그것은 많은 멋진 특징들을 가지고 있습니다!

여기에서 확인하세요: jQuery doTimeout: setTimeout과 비슷하지만 더 좋습니다.

그렇게 사용할 수 있으려면, 당신은 돌아와야 합니다.thisfadeOut('느림')을 반환하지 않으면 해당 작업을 수행할 개체를 얻을 수 없습니다.

예:

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

다음을 수행합니다.

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

이 작업은 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/

언급URL : https://stackoverflow.com/questions/316278/timeout-jquery-effects