delay() o timeout con stop()?

Question

$('.file a').live('mouseenter', function() { 
    $('#download').stop(true, true).fadeIn('fast'); 
}).live('mouseleave', function() { 
    $('#download').stop(true, true).fadeOut('fast'); 
}); 

Quiero que la función mouseenter tenga un stop() y un retraso de 1 segundo. Por lo tanto, si se pasa el mouse sobre #download, el fadeIn debe iniciarse después de un retraso de 1 segundo. Si saco el mouse mientras tanto, el fadeIn no debería comenzar. ¿Consígueme?

Realmente no sé cómo hacer eso, ¿alguna idea?

Answer 1

Necesita usar setTimeout() en este caso debido a cómo funciona .delay() (y su incapacidad para cancelarlo).

$('.file a').live('mouseenter', function() { 
    $.data(this, 'timer', setTimeout(function() { 
     $('#download').stop(true, true).fadeIn('fast'); 
    }, 1000)); 
}).live('mouseleave', function() { 
    clearTimeout($.data(this, 'timer')); 
    $('#download').stop(true, true).fadeOut('fast'); 
}); 

You can give it a try here.

Si usa .delay(), dequeará la animación siguiente para el elemento, independientemente de si ha borrado esa cola anteriormente. Por lo tanto, necesita un tiempo de espera para que can cancelar, que lo anterior hace llamando manualmente al setTimeout() y almacenando el resultado con $.data() para que pueda borrarlo más tarde, a través de clearTimeout().

Answer 2

utilizar una función setTimeout

$('.file a').live('mouseenter', function() { 
setTimeout(function(){ 
    $('#download').stop(true, true).fadeIn('fast'); 
}, 1000); 
}).live('mouseleave', function() { 
    $('#download').stop(true, true).fadeOut('fast'); 
}); 

setTimeout ejecutará el código dentro de la función después de los milisegundos especificado (en este caso 1000).

Answer 3

puede usar esto en jquery sin usar el evento de retraso.

$('.file a').hover(function() { 
    time = setTimeout(function() { 
    $('#download').fadeIn(); 
    },1000); 
},function(){ 
    clearTimeout(time); 
}); 

1000 es el tiempo que después de él $ ('# download') se desvanecerá.

Answer 4

que estaba buscando la respuesta a una pregunta similar y me encontré con que .animate() también podría ser utilizado para manejar esto, y que obedece a .Stop()

Se vería algo como esto:

$('.file a').live('mouseenter', function() { 
    $('#download') 
     .stop(true, true) 
     .animate({opacity:0}, 1000);   // one second delay 
     .animate({opacity:1}, 'fast', 'swing'); 
}).live('mouseleave', function() { 
    $('#download') 
     .stop(true, true) 
     .animate({opacity:0}, 'slow', 'swing'); 
});