Efectos de jQuery de tiempo de espera

101

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

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

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

jquery timeout Coughlin
fuente

Respuestas:

197

Actualización: a partir de jQuery 1.4 puedes usar el .delay( n )método. http://api.jquery.com/delay/

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

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

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

Posiblemente podría usar la sintaxis de la cola, 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 crear una función jQuery para hacerlo.

(function($){ 

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

que (en teoría, trabajando en la memoria aquí) le permitiría hacer esto: 

$('.notice').fadeIn().idle(2000).fadeOut('slow');
Kent Fredric
fuente
1
Me pregunto por qué está usando la cola cuando un uso simple de setTimeout también funcionará.
SolutionYogi
33
porque si usa la cola, es fácil agregar nuevos eventos y reutilizar el código, y la reutilización del código es un GoodThing ™
Kent Fredric
2
Tenga en cuenta que, como también se indica en la documentación de la API de jQuery, delay () realmente solo debería usarse para cosas relacionadas con la cola de efectos. Si necesita un tiempo de espera para otra cosa, setTimeout () sigue siendo el camino a seguir.
scy
Vaya, gracias por el enlace @bottlenecked, supongo que la razón por la que mi ejemplo es tan similar a la nueva función agregada a jQuery es que hay una notable cadena de influencia de esta respuesta a bugs.jquery.com/ticket/4102 = P
Kent Fredric
23

Lo acabo de descubrir a continuación:

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

¡Conservaré la publicación para otros usuarios!

Coughlin
fuente
14

Gran truco de @strager. Impleméntelo en jQuery así:

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

Y luego úsalo como:

$('.notice').fadeIn().wait(2000).fadeOut('slow');
Arash Milani
fuente
11

Puedes hacer algo como esto:

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

Lamentablemente, no puede simplemente hacer .animate ({}, 2000); creo que esto es un error y lo reportaré.

extraño
fuente
5

Para poder usarlo así, debes regresar this. Sin el retorno, fadeOut ('lento'), 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');
user128026
fuente
1

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

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

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

DaveAlger
fuente