The other day I was working with changing the opacity of a link on hover: setting it initially to 40% while hovering over brought it to 100% immediately and leaving gradually returned the opacity to 40%.

My html looks like this:

<a class="the_link" style="background-color:red">the link</a>

My jquery, inside a document ready function, looks like this:

$(".the_link").animate({opacity : 0.4},0).hover(function(){
        $(this).stop().animate({opacity : 1),0);
}, function(){
        $(this).stop().animate({opacity : 0.4),500);
});

When my page loaded, I noticed the initial instantaneous change in opacity from 100% to 40%. However, when I hovered over the link, the animation to 100% opacity took approximately half a second (unintended), as did the animation back to 40% (intended).

It appears to me that in the first animation of duration 0, the 0 is correctly interpreted as 0 milliseconds, whereas in the second hover over animation, the same 0 is being interpreted as a boolean false which is resulting in an animation that believes no duration is specified and uses the default animation speed (250-500ms it looks like to me).

I had no problem fixing this problem by specifying both animations to take 1 millisecond, but it seems that there may be instances where the value 0 is interpreted differently for the animation duration.

Please feel free to contact me if you have additional questions.