요소를 페이드 인한 다음 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);
});
작동 예는 아래 바이올린을 참조하십시오 …