Come posso sfumare un div usando jQuery?

Question

C'è un modo per dissolvere un div dopo 5 secondi senza utilizzare una funzione setTimeOut?

Answer 1

tutti sanno che in jQuery 1.4 c'è una funzione di ritardo ora, giusto?

$('#div').delay(5000).fadeOut(400) 

ecco come lo si fa, senza dover aggiungere alcuna funzione personalizzata o plug-in. è nativo di jquery 1.4

Answer 2

Supponendo che significare 'attendere cinque secondi e poi fade out', penso che dovrete utilizzare un plugin per forzare il ritardo, ad esempio this one

Answer 3

Non sono sicuro se si vuole prendere 5 secondi o inizio in 5 secondi.

Affinché occorra 5 secondi: La funzione di dissolvenza jQuery può essere utilizzata su un div e riduce l'opacità dell'elemento finché non è 0 e quindi non visualizza nessuno div. La velocità della dissolvenza è un parametro per la funzione.

http://docs.jquery.com/Effects/fadeOut#speedcallback

per avviarlo in 5 secondi, avrete bisogno di un qualche tipo di timer che inizia quando il documento o la finestra è pronto, o quando il div è pronto a seconda di ciò che si desidera.

Answer 4

Come circa la funzione fadeOut(). Sarebbe simile a questa:

$("#myDiv").fadeOut(5000); 

Answer 5

Caso 1: se si desidera iniziare fadeOut dopo 5 secondi, usare questo:

jQuery.fn.delay = function(time,func){ 
    return this.each(function(){ 
     setTimeout(func,time); 
    }); 
}; 

Quindi, utilizzare in questo modo:

$('#div').delay(5000, function(){$(#div').fadeOut()}) 

Non è possibile raggiungere questo obiettivo senza utilizzare setTimeOut

C ase 2: se si desidera che la durata di fadeOut ad essere di 5 secondi, usare questo:

$('#div').fadeOut(5000) 

Answer 6

// Io uso questo plugin di pausa che ho appena scritto

$.fn.pause = function(duration) { 
    $(this).animate({ dummy: 1 }, duration); 
    return this; 
}; 

chiamare in questo modo:

$("#mainImage").pause(5000).fadeOut(); 

Nota: non è necessario un richiamo.

Answer 7

Ho appena avuto lo stesso problema e, a mio parere, la risposta contrassegnata in realtà non soddisfa la domanda. Se uno specifica piace

$("#myDiv").fadeOut(5000); 

come suggsted, il processo di dissolvenza in sé avrà una durata di 5 secondi, ma non inizio dopo 5 secondi.

Quindi ero alla ricerca di un'alternativa, senza dover includere un altro plugin jQuery ecc La soluzione più semplice mi è venuta era di scrivere come segue:

$("#myDiv").fadeTo(5000,1).fadeOut(1000); 

utilizza l'effetto fadeTo ed è in qualche modo un "hack". Lascio scorrere la dissolvenza per 5 secondi e la dissolvenza a 1 = 100% di opacità. In questo modo l'utente non percepisce alcun cambiamento. Successivamente la normale chiamata a fadeOut con una durata dell'effetto di 1 secondo.

Immagino che questa soluzione sia abbastanza semplice poiché non richiede alcun plugin aggiuntivo e può essere scritta in 1 riga.

Cheers.

// EDIT:
A quanto pare v'è ora la possibilità di fare qualcosa di simile:

$('#myDiv').delay(800).fadeOut(1000); 

Here are alcuni più cool, le funzioni utili.