examples - jquery toggle

Tiempo de espera jQuery efectos

Question

Estoy intentando que un elemento se desvanezca, luego en 5000 ms se desvanecen nuevamente. Sé que puedo hacer algo como:

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

Pero eso solo controlará el fundido de salida, ¿agregaría lo anterior en la devolución de llamada?

Answer 1

Acabo de descubrirlo a continuación:

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

¡Guardaré la publicación para otros usuarios!

Answer 2

Ben Alman escribió un dulce complemento para jQuery llamado doTimeout. ¡Tiene muchas características agradables!

Compruébelo aquí: jQuery doTimeout: como setTimeout, pero mejor .

Answer 3

Esto se puede hacer con solo unas pocas líneas de 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);
});​

ver el violín a continuación para un ejemplo de trabajo ...

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

Answer 4

Gran truco por @strager. Implementarlo en jQuery de esta manera:

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

Y luego usarlo como:

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

Answer 5

Para poder usarlo así, necesita devolver this . Sin el retorno, fadeOut (''slow'') no obtendrá un objeto para realizar esa operación.

Es decir:

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

Entonces haz esto:

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

Answer 6

Puedes hacer algo como esto:

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

Tristemente, no puedes hacer .animate ({}, 2000) - Creo que esto es un error y lo reportaré.

Answer 7

Actualización: a partir de jQuery 1.4, puede usar el .delay( n ) . http://api.jquery.com/delay/

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

Nota : $.show() y $.hide() de forma predeterminada no están en la cola, por lo que si desea usar $.delay() con ellos, debe configurarlos de esa manera:

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

Posiblemente pueda usar la sintaxis de Queue, esto podría funcionar:

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

o podrías ser realmente ingenioso y hacer una función jQuery para hacerlo.

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

lo cual (en teoría, trabajando en la memoria aquí) le permite hacer esto:

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