how to stop the fadein repeating over multiple hovers

Question

I currently have this code below:

$("ol#homePortfolio li img").fadeTo("slow", 1.0);

$("ol#homePortfolio li img").hover(
    function() {
        $("ol#homePortfolio li img").fadeTo("slow", 0.8); 
    }, 
    function() {
        $("ol#homePortfolio li img").fadeTo("slow", 1.0); 
    }
);

However, when I hover over the image multiple times the fadeIn and fadeOut keeps on carrying on, how can I apply the stop so it only happens once?

Answer 1

You're probably looking for the stop function. (jquery.com is having issues today, here's a link to Google's cached copy.) stop stops any animation currently in progress.

Just call it prior to starting an animation, to stop any previous animation on that element:

$("ol#homePortfolio li img").stop().fadeTo("slow", 0.8);
//                           ^----

You'll want to play with it a bit (I don't do many animations that might overlap), stopping some animations in the middle might mean you need to be sure to reset the element to a known state. Or alternately, use the jumpToEnd flag:

$("ol#homePortfolio li img").stop(false, true).fadeTo("slow", 0.8);
//                                ^      ^-- true = jump to the end of the animation
//                                |--------- false = don't clear the queue (you may
//                                           want true here, to clear it)