example Come posso sfumare un div usando jQuery?



jquery guida (6)

Che ne dici della funzione fadeOut () . Sarebbe simile a questo:

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

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


Answer #1

// uso questo plugin di pausa che ho appena scritto

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

Chiamalo così:

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

Nota: non è necessario un callback.


Answer #2

Supponendo che tu intenda "aspettare cinque secondi e poi svanire", penso che dovrai usare un plugin per forzare il ritardo, ad esempio questo


Answer #3

Caso 1: se si desidera avviare fadeOut dopo 5 secondi, utilizzare questo:

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

Quindi, usalo in questo modo:

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

Non è possibile ottenere ciò senza utilizzare setTimeOut

Caso 2: se vuoi che la durata di fadeOut sia di 5 secondi, usa questo:

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

Answer #4

Ho appena avuto lo stesso problema e, a mio parere, la risposta marcata in realtà non soddisfa la domanda. Se lo si specifica come

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

come suggerito, il processo di fading durerà per 5 secondi, ma non inizierà dopo 5 secondi.

Quindi stavo cercando un'alternativa, senza dover includere un altro plug-in jQuery, ecc. La soluzione più semplice che ho trovato era di scriverla come segue:

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

Usa 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.

Saluti.

//MODIFICARE:
Apparentemente ora c'è la possibilità di fare qualcosa del genere:

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

Ecco alcune funzioni più interessanti e utili.


Answer #5

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

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

è così che lo fai, senza dover aggiungere funzioni o plug-in personalizzati. è nativo di jquery 1.4





jquery