javascript - fadeto - jquery stop function

Jquery Stop Fadein/Fadeout

Question

Este es bastante fácil, pero parece que no puedo resolverlo.

Básicamente, tengo un jquery hover que se desvanece en un div y se desvanece el otro sobre el hover.

Cuando rápidamente me desplazo y apaga algunas veces, pulsa de un lado a otro durante unos 3-4 segundos para terminar con todas esas entradas y salidas de fundido.

Generalmente paro estas cosas con .stop (), pero no parece hacer el truco aquí. ¿Cómo puedo acabar con el fundido de entrada si me quedo sin presionar el botón antes de "an"? (". TxtWrap").

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

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

Answer 1

En momentos como este, .hoverIntent() genio .hoverIntent() Brian Cherne. Es bastante suave ... espera hasta que el usuario se haya ralentizado lo suficiente antes de ejecutar. Puedes configurarlo a tus necesidades.

Solo incluye el complemento (es lo suficientemente corto, algunas veces lo colocaré directamente en mi archivo de script) y luego agregaré la palabra Intent :

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

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

Answer 2

Estaba a punto de publicar una pregunta similar cuando el motor de búsqueda SO superinteligente 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 escondiendo y mostrando comenzó como display:none , así que tuve que agregar opacity:0 al CSS y decirle a jQuery que establezca .css({display:block}) antes de que comience a animar la opacidad a 1 para fundirse.

Al desaparecer, no necesitaba eso, pero sí .hide() una devolución de llamada a .hide() el div después de animar la opacidad a cero.

Aquí hay un violín que ilustra lo que terminé con:

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

El 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();
    });
});

Answer 3

Pensé en publicar esto porque ninguna de estas respuestas funcionó para mí.

* Los verdaderos params le dicen a stop para borrar la cola y 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

Answer 4

Si tienes esta cosa:

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

      });
  });
});

De acuerdo, debe usar esta instrucción para restablecer fadeIn u otro evento en la cola:

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

Answer 5

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();
  }
)

EDITAR:

Esto animará la opacidad de los elementos sin ocultar el elemento. Si desea que .hide() ocultos, use .hide() necesitará agregar una devolución de llamada a la función animar.

$(".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);
  }
)