Effetti jQuery timeout

101

Sto provando ad avere un elemento in dissolvenza in entrata, quindi in 5000 ms in dissolvenza di nuovo in uscita. So di poter fare qualcosa come:

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

Ma questo controllerà solo la dissolvenza in uscita, aggiungerei quanto sopra al callback?

jquery timeout

— Coughlin
fonte

197

Aggiornamento: a partire da jQuery 1.4 puoi utilizzare il .delay( n )metodo. http://api.jquery.com/delay/

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

Nota : $.show()e $.hide()per impostazione predefinita non sono in coda, quindi se vuoi $.delay()usarli, devi configurarli in questo modo:

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

Potresti usare la sintassi della coda, potrebbe funzionare:

jQuery(function($){ 

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

});

oppure potresti essere davvero ingegnoso e creare una funzione jQuery per farlo.

(function($){ 

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

che ti permetterebbe (in teoria, lavorando sulla memoria qui) di fare questo:

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

— Kent Fredric
fonte

1

Mi chiedo perché stai usando la coda quando funzionerà anche un semplice utilizzo di setTimeout.

— SoluzioneYogi

33

perché se usi la coda, è facile aggiungere nuovi eventi e riutilizzare il codice, e il riutilizzo del codice è un GoodThing ™

— Kent Fredric

2

Si noti che, come indicato anche nella documentazione dell'API jQuery, delay () dovrebbe essere utilizzato solo per le cose relative alla coda degli effetti. Se hai bisogno di un timeout per qualcos'altro, setTimeout () è ancora la strada da percorrere.

— scy

Wow, grazie per il link @bottlenecked, immagino che il motivo per cui il mio esempio è così simile alla nuova funzionalità aggiunta a jQuery è che c'è una notevole catena di influenza da questa risposta a bugs.jquery.com/ticket/4102 = P

— Kent Fredric

23

L'ho appena capito di seguito:

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

Terrò il post per altri utenti!

— Coughlin
fonte

14

Ottimo trucco di @strager. Implementalo in jQuery in questo modo:

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

E poi usalo come:

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

— Arash Milani
fonte

11

Puoi fare qualcosa del genere:

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

Purtroppo, non puoi semplicemente fare .animate ({}, 2000) - Penso che questo sia un bug e lo segnalerò.

— Strager
fonte

7

Ben Alman ha scritto un dolce plugin per jQuery chiamato doTimeout. Ha molte caratteristiche interessanti!

Dai un'occhiata qui: jQuery doTimeout: come setTimeout, ma meglio .

— jason
fonte

5

Per poterlo usare in questo modo, devi tornare this. Senza il ritorno, fadeOut ('slow'), non otterrà un oggetto su cui eseguire quell'operazione.

Vale a dire:

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

Quindi fai questo:

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

— user128026
fonte

1

Questo può essere fatto solo con poche righe di 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);
});

vedere il violino sotto per un esempio funzionante ...

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

— DaveAlger
fonte