¿Cómo puedo desvanecer un div usando jQuery?

Question

¿Hay alguna forma de desvanecer un div después de 5 segundos sin utilizar una función setTimeOut?

Answer 1

todos saben que en jquery 1.4 hay una función de retardo ahora, ¿no?

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

así es como lo hace, sin tener que agregar funciones personalizadas o complementos. es nativo de jquery 1.4

Answer 2

Asumiendo que significa 'esperar cinco segundos y después desaparecerá', creo que vas a tener que usar un plugin para forzar el retraso, por ejemplo this one

Answer 3

No está seguro de si desea que se lleve 5 segundos o inicio en 5 segundos

Para que tome 5 segundos: la función jQuery fadeout se puede utilizar en un div, y reducirá la opacidad del elemento hasta que sea 0 y luego no muestre ninguno. La velocidad del fundido es un parámetro para la función.

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

para iniciarlo en 5 segundos, usted necesitará algún tipo de temporizador que se inicia cuando el documento o ventana está listo, o cuando el div está listo dependiendo de lo que desee.

Answer 4

Qué tal la función fadeOut(). Sería algo como esto:

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

Answer 5

Caso 1: si quieres comenzar fadeOut después de 5 segundos, utilice esto:

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

A continuación, utilizar de esta manera:

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

No puede lograr esto sin usar setTimeOut en absoluto

C ase 2: si desea que el duración de fadeOut a ser de 5 segundos, utilice esto:

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

Answer 6

// i utilizar este plugin de pausa que acabo de escribir

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

Llamada así:

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

Nota: no necesita una devolución de llamada.

Answer 7

Acabo de tener el mismo problema y, en mi opinión, la respuesta correcta realmente no satisface la pregunta. Si uno especifica que como

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

como suggsted, el proceso de decoloración en sí tendrá una duración de 5 segundos, pero no inicio después de 5 segundos.

Así que yo estaba buscando una alternativa, sin tener que incluir otro plugin de jQuery etc. La solución más simple que se me ocurrió fue que escribirlo de la siguiente manera:

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

Se utiliza el efecto fadeTo y es de alguna manera un "truco". Dejo que fadeTo se ejecute durante 5 segundos y lo dejo fundido a 1 = 100% de opacidad. De esta forma, el usuario no percibe ningún cambio. Luego, la llamada normal a fadeOut con una duración del efecto de 1 segundo.

Supongo que esta solución es bastante simple ya que no requiere ningún complemento adicional y se puede escribir en 1 línea.

Saludos.

// EDIT:
Al parecer, ahora existe la posibilidad de hacer algo como esto:

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

Here are algunas funciones útiles, más fresco.