jQuery Fadeout al hacer clic o después de la demora

Estoy mostrando un cuadro de mensaje en un sitio web. Me gustaría poder tener un fadeout al hacer clic o después de X segundos. El problema es que la función delay() toma el lugar sobre la función click() por lo que incluso si hace clic en cerrar, todavía tiene que esperar el tiempo.jQuery Fadeout al hacer clic o después de la demora

Aquí es el jQuery

$(document).ready(function() {  
$(".close-green").click(function() { 
     $("#message-green").fadeOut("slow"); 
    }); 

    //fade out in 5 seconds if not closed 
    $("#message-green").delay(5000).fadeOut("slow"); 

})

También he creado un jsFiddle sencilla. Para ver el comentario problema de la línea de retardo http://jsfiddle.net/BandonRandon/VRYBk/1/

Fuente

2011-03-17 BandonRandon

posible duplicado de [retardo efectos jQuery] (http://stackoverflow.com/questions/251204/delay-jquery-effects) – swilliams

@swilliams eso no es ni siquiera cerca de lo mismo . Esa persona quiere saber CÓMO retrasar una animación, el OP ya sabe cómo pero quiere saber cómo evitar el retraso si un evento tiene lugar antes de que termine el retraso. –

se debe cambiar a un setTimeout: http://jsfiddle.net/VRYBk/3/

(en el enlace jsFiddle) Quité su línea de retardo y lo reemplazó con un estándar setTimeout como:

Como nota de WHY, se debe a que JS se lee de arriba a abajo y leerá su retraso antes de hacer clic y desencadenar el evento. Por lo tanto, incluso cuando hace clic, se está ejecutando la demora, lo que hace que todas las animaciones pausen.

Fuente

2011-03-17 21:59:26

Actualicé mi respuesta para explicar POR QUÉ está teniendo este problema –

Gracias, pensé que era algo simple. ¡Realmente te agradezco que me expliques POR QUÉ también! :) – BandonRandon

Esto sería un uso ideal para jQuery 1.5 Deferred nuevos objetos:

// a deferred object for later processing 
var def = $.Deferred(); 

// resolve the deferred object on click or timeout 
$(".close-green").click(def.resolve); 
setTimeout(def.resolve, 5000); 

// however the deferred object is resolved, start the fade 
def.done(function() { 
    $(".message-green").fadeOut("slow"); 
});

demostración Trabajar en http://jsfiddle.net/Nyg4y/3/

Tenga en cuenta que no importa que si pulsa el botón del disparador automático incendios: la segunda llamada al def.resolve() se ignora.

Fuente

2011-03-17 22:28:53 Alnitak

Gracias, estoy usando una versión un poco más antigua de la biblioteca pero si actualizo a 1.5 ahora tengo algo de lo que me puedo escapar. – BandonRandon

I FOUNT que la mejor solución sugerida por Oscar Ahijado, de alguna manera añade esto a él:

if (! $clicked.hasClass("search")) 
{ 
    setTimeout(function() 
    { 
     jQuery("#result").delay('1500').fadeOut('2800'); 
    },7000); 
} 
});

Su sugerencia original es muy útil:

se debe cambiar a un setTimeout: http://jsfiddle.net/VRYBk/3/

(en el enlace jsfiddle) Quité su línea de retardo y la reemplacé con un setTimeout estándar como:

setTimeout(function(){ 
     $("#message-green").fadeOut("slow"); 
},5000)

Por Oscar Ahijado,

Fuente

2014-09-24 13:37:56

jQuery Fadeout al hacer clic o después de la demora

Respuesta

Cuestiones relacionadas