시간 초과 jQuery 효과


101

요소를 페이드 인한 다음 5000ms 후에 다시 페이드 아웃하려고합니다. 다음과 같이 할 수 있다는 것을 알고 있습니다.

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

하지만 그것은 페이드 아웃 만 제어 할 것입니다. 위의 내용을 콜백에 추가할까요?

답변:


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

1
setTimeout의 간단한 사용법도 작동 할 때 왜 큐를 사용하는지 궁금합니다.
SolutionYogi

33
큐를 사용하면 새 이벤트를 쉽게 추가하고 코드를 재사용 할 수 있으며 코드 재사용은 GoodThing ™
Kent Fredric 2009-07-11

2
jQuery API 문서에서도 언급했듯이 delay ()는 실제로 효과 대기열과 관련된 항목에만 사용해야합니다. 다른 것에 대한 시간 제한이 필요한 경우 setTimeout ()이 여전히 갈 길입니다.
scy

와우, 링크에 대한 감사 @bottlenecked, 내 예제는 jQuery를에 추가 된 새로운 기능에 매우 유사하다는 이유를 추측이 답변에서 영향의 주목할만한 고리가 있다는 것이다 bugs.jquery.com/ticket/4102 = P는
Kent Fredric 2011 년

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) 만 할 수는 없습니다. 버그라고 생각하며보고 할 것입니다.



5

그렇게 사용하려면을 반환해야합니다 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');

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/

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.