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?
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)")