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