Question

Let’s say I have this

$(".a").animate(
        {"left":"100%"},
        {duration:50000, complete:function(){
             $(".a").css("background-color","black");
        }}
);

$(".b").mouseover(function(){
        $(".a").stop();
});

When .b is mouseover-ed, .a will stop() and therefore its complete:event won’t be triggered….

What should I do so even if it stops its complete:event would be triggered?

Is there any solution better than this?

function aaa(){
   $(".a").css("background-color","black");
 }    

$(".a").animate(
        {"left":"100%"},
        {duration:50000, complete:function(){
            aaa();
        }}
);

$(".b").mouseover(function(){
        $(".a").stop();
        aaa();
});

---

[UPDATES]
This is how my codes actually looks like, sorry didn’t show it earlier…

$(".a").animate(
        {"left":"100%"},
        {duration:50000, complete:function(){
             alert("A");
        }}
);

$(".b").mouseover(function(){
        $(".a").stop().animate(
             {"top":"100%"}
        )
});

I want alert("A") to be executed only once.. but I don’t stop users from mouseover-ing .b which stops .a..

If I was to write .bmouseover this way:

$(".b").mouseover(function(){
        $(".a").stop().animate(
             {"top":"100%"}
             {complete:function(){
                  alert("A");
             }}            
        )
});

it might alert("A") twice and I don’t want that…

Answer 1

You are looking for 'jumpToEnd' parameter of jQuery.stop():

This will do the trick:

$(".a").stop(true,true);

DEMO: