jQuery: Problema de manejo de eventos Stop () con respecto a Animate () Completado

Digamos que tengo estas dos funciones:

$(".a").animate(
        {"left":"100%"},
        {duration:10000, complete:function(){
             //Something is triggered!! e.g 
             alert("a");
            //Please note: In actual case it is never as simple as alert("a").
        }}
);

$(".b").mouseover(function(){
    $(".a").stop().animate({"top":"100px"},{duration:5000});
});
  • Según estos, .a se detendría mientras .b is mouseover-ed y animate({"top":"100px"},{duration:5000}) se desencadenaría.

  • pero quiero que alert("a") una vez cuando .b is mouseover-ed y luego disparar animate({"top":"100px"},{duration:5000}).

Sin embargo, no puedo configurar la segunda función de esta manera:

$(".b").mouseover(function(){
        //something happens! e.g
        alert("a");
        $(".a").stop().animate({"top":"100px"},{duration:5000});
    });
  • Sería alert("a") dos veces if .b is mouseover-ed después .a hecho animate.

He tratado stop()'s jumpToEnd parameter y no es ideal

Siempre que .b is mouseover-ed, .a's animte se completaría al instante y .a sería desplazado a left:100%. Quiero que stop en donde está y sin embargo alert("a") antes del segundo animate siendo activado


¡Estaría extremadamente agradecido si alguien puede proporcionar una solución rápida y fácil para esto!

preguntado el 22 de mayo de 12 a las 09:05

2 Respuestas

$(".a").animate(
        {"left":"100%"},
        {duration:10000, complete:myAfterWork} // Use the function name only
);

$(".b").mouseover(function(){
    myAfterWork();
    $(".a").stop().animate({"top":"100px"},{duration:5000});
});

function myAfterWork()
{
  if($(".a").is(":animated"))
  {
    //Access $(".a") here and do your job

    //Note if you use $(this) in place of $(".a") it will be different 
    //when called from .a's animation than from .b's animation
  }

}

contestado el 22 de mayo de 12 a las 10:05

Puede comprobar si el elemento es actualmente animando al filtrarlo contra :animated.

$('.b').mouseover(function () {

    // if NOT animating, then terminate
    if (!$('.a').is(':animated')) { return; }

    // carry on

});

contestado el 22 de mayo de 12 a las 09:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.