how to stop the fadein repeating over multiple hovers

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",开发者_JS百科 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?

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)

Meh, I don't like stop() that much, it's a bit inneficient.

You should put this before your first fadeTo in the hover function : .filter(":not(:animated)")

I use

.stop()

http://api.jquery.com/stop/

I used .filter(":not(:animated)"). it works fine for me, but .stop() does not. When I used .stop() multiple times hovering over mouse on link animations freezes in a middle of fadeIn or fadeOut. I suggest using .filter() in such situations.