[jquery] 시간 초과 jQuery 효과

Program / 글쓴이

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

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

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

답변

나는 그것을 아래에서 알아 냈다.

$(".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과 비슷하지만 더 좋습니다 .

답변

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

답변

이것은 몇 줄의 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/