Question

Let’s take this script:

$('a').hover(function() {
    $('div').stop(c,j).fadeIn();
}, function() {
    $('div').stop(c,j).fadeOut();
});

With c=0,j=0, if I over a several times, my div fade in and out and in and… yerk.
With c=1,j=1, it almost does what I want, but we got this blinking effect due to the jumpToEnd parameter, and it looks buggy.
So finally, what I want is c=0,j=1, BUT if I over in, and quickly over out and back in, animation is stopped, the next fade function won’t launch and my div is half transparent. Why ?

Another visual example.

I meet this issue often enough, and wonder why I can’t find anything on it. (Last I can remember is a comment on jQuery stop() page, but comments are now removed.)

Answer 1

Here’s a better comparison between all the different usages of .stop(): http://jsfiddle.net/4v8Uk/13/

<div data-one="0" data-two="0" id="a">a</div>
<div data-one="1" data-two="0" id="b">b</div>
<div data-one="1" data-two="1" id="c">c</div>
<div data-one="0" data-two="1" id="d">d</div>

---

$("div").hover(function(){
    var d = $(this).data();
    $(this).stop(d.one,d.two).toggle("slow");
});

options a and b seem to be closer to what you are looking for. (0,0 and 1,0)

Update: I still don’t have a clear answer as to why it happens, though I believe it happens because jQuery is seeing the element as shown already, therefore it doesn’t show it. Why that doesn’t effect .toggle() i don’t know.

However, you can fix it by recreating your animation with .animate.

http://jsfiddle.net/4v8Uk/17/

$("div").hover(function(){
    var d = $(this).data();
    $(this).stop(d.one,d.two).animate({"opacity":"0", "height":"0px", "width":"0px"},"slow");
}, function(){
    var d = $(this).data();
    $(this).stop(d.one,d.two).animate({"opacity":"1", "height":"100px", "width":"100px"},"slow");
});