Jquery Stop Fadein/Fadeout

Esto es bastante fácil, pero parece que no puedo resolverlo.Jquery Stop Fadein/Fadeout

Básicamente tengo un jquery hover que se desvanece en un div y desaparece al otro al pasar el mouse.

Cuando me muevo rápidamente varias veces, pulsa hacia adelante y hacia atrás durante unos 3-4 segundos para finalizar todas las salidas de fundido de entrada/salida.

En general, detengo estas cosas con .stop(), pero parece que no funciona bien aquí. ¿Cómo puedo matar al fundido de entrada si se ciernen del botón antes de que el an` $ ("txtWrap.") Stop() Pase el ratón (

$(".txtWrap").stop().hover(
    function() { 
    $(this).find('.txtBock').fadeOut(); 
    $(this).find('.txtDesc').fadeIn(); 

    }, 
    function() { 
    $(this).find('.txtBock').fadeIn(); 
    $(this).find('.txtDesc').fadeOut(); 
    } 
)

Fuente

2010-05-10 wesbos

Su stop() está fuera de lugar

Prueba esto...:

$(".txtWrap").hover(
    function() { 
    $(this).find('.txtBock').stop().fadeOut(); 
    $(this).find('.txtDesc').fadeIn(); 
    // $('#timeTxt').fadeOut(); 
    // $('#timeTxtDesc').fadeIn(); 

    }, 
    function() { 
    $(this).find('.txtBock').fadeIn(); 
    $(this).find('.txtDesc').stop().fadeOut(); 
    } 
)

EDIT:

Esto animará el correo la opacidad de los materiales sin ocultar el elemento. Si los quiere ocultos, use .hide() y tendrá que agregar una devolución de llamada a la función animada.

$(".txtWrap").hover(
    function() { 
    $(this).find('.txtBock').stop().animate({opacity:0}, 500); 
    $(this).find('.txtDesc').animate({opacity:1}, 500); 
    // $('#timeTxt').fadeOut(); 
    // $('#timeTxtDesc').fadeIn(); 

    }, 
    function() { 
    $(this).find('.txtBock').animate({opacity:1}, 500); 
    $(this).find('.txtDesc').stop().animate({opacity:0}, 500); 
    } 
)

Fuente

2010-05-10 19:48:34 user113716

Intenté que funcione en el primer aleteo, pero nunca consigo que .txtDesc vuelva a situarse en .. – wesbos

@Wes - Quité el 'stop()' del fundido de entrada. Si el 'txtWrap' se dimensiona en función de su contenido, es probable que cuando un elemento se desvaneció y se ocultara, el 'txtWrap' cambió de tamaño y se movió fuera del puntero del mouse, lo que desencadenó un' mouseleave' no deseado. Esto debería asegurar que siempre ocurra el 'fadein'. – user113716

Eso parece estar un poco más cerca, pero cuando muevo el mouse prematuramente, me queda un div con media transparencia. Así que si muevo el mouse al 50% de opacidad, cuando vuelva a ingresar, solo se desvanecerá en un 50%. ¿Hay alguna forma de resetearlo? – wesbos

En momentos como este me vuelvo hacia el genio de Brian Cherne .hoverIntent() plugin - Es bastante suave ... espera hasta que el usuario se ha ralentizado lo suficiente antes de ejecutar. Puede configurarlo según sus necesidades.

basta con incluir el plugin (que es lo suficientemente corto como a veces voy a colocarlo directamente en mi archivo de comandos) a continuación, añadir la palabra Intent:

$(".txtWrap").hoverIntent(
    function() { 
    $(this).find('.txtBock').fadeOut(); 
    $(this).find('.txtDesc').fadeIn(); 

    }, 
    function() { 
    $(this).find('.txtBock').fadeIn(); 
    $(this).find('.txtDesc').fadeOut(); 
    } 
)

Fuente

2010-07-21 01:16:01 brandonjp

estaba a punto de publicar una pregunta similar cuando la superinteligente búsqueda para Engine destacó esta pregunta para mí, así que pensé en publicar mi propia solución para la posteridad.

Tomé la solución de user113716 y la desarrollé un poco. En mi caso, el div que estaba ocultar y mostrar que comenzó como display:none, así que tuve que añadir opacity:0 a la CSS y decirle al jQuery para establecer .css({display:block}) antes de que empezara la animación de la opacidad a 1 a desvanecerse en.

Por se desvaneció, no lo necesitaba, pero añadí una devolución de llamada al .hide() div después de animar la opacidad a cero.

Aquí es un violín que ilustra lo que terminó con:

http://jsfiddle.net/mblase75/wx2MJ/

La JavaScript relevante:

$('li').mouseover(function() { 
    $(this).addClass('hover'); 
    $('#' + $(this).data('divid')).stop().css({ 
     display: 'block' 
    }).animate({ 
     opacity: 1 
    }, 500); 
}); 

$('li').mouseout(function() { 
    $(this).removeClass('hover'); 
    $('#' + $(this).data('divid')).stop().animate({ 
     opacity: 0 
    }, 500, function() { 
     $(this).hide(); 
    }); 
});

Fuente

2011-11-07 17:10:42 Blazemonger

pensaba que iba a publicar esto porque ninguna de estas respuestas trabajó para mí.

* Los verdaderos params dicen detener a borrar la cola e ir al final de la animación

$(".txtWrap").stop().hover(
    function() { 
    $(this).find('.txtBock').stop(true, true).fadeOut(); 
    $(this).find('.txtDesc').fadeIn(); 

    }, 
    function() { 
    $(this).find('.txtBock').fadeIn(); 
    $(this).find('.txtDesc').stop(true, true).fadeOut(); 
    } 
)

Enlace: http://forum.jquery.com/topic/jquery-hover-events-cant-keep-up-with-fadein-and-fadeout-events-queue

Fuente

2012-05-25 19:45:26

como tú, otras soluciones no funcionaron. Sin embargo, terminé yendo con '$ (this) .find ('. TxtBock'). Stop (true, true)' para detener el fadeout. +1 –

Si usted tiene esta cosa:

$("#frase1").fadeIn(5000, function(){ 
    $("#frase2").fadeIn(10000, function(){ 
     $("#frase3").fadeIn(15000, function(){ 

     }); 
    }); 
});

todo bien, debe usar esta instrucción para reiniciar fadeIn u otro evento en la cola:

$("#frase1").stop(false,true, true); 
$("#frase2").stop(false,true, true); 
$("#frase3").stop(false,true, true);

Fuente

2012-06-04 19:59:12 Francesco

Respuesta

Cuestiones relacionadas