jQuery Forum

I am trying to do a fade out and in on mouseover and mouse out. Below
I have a div that contains these functions and fades out or in an
image on toggle. The problem is after mouse over, it repeats over and
over without stopping. I also notice the opacity on mouseout is
always 1 and never 0. Is there any reason why the mouseover keeps
repeating itself?
<div id="ctl00_cphMainWell_dlPageSize2_ctl00_ProductView_pOuter"
class="zoom"
onmouseover="setHoverState('ctl00_cphMainWell_dlPageSize2_ctl00_ProductView_pOuter');"
onmouseout="setHoverState('ctl00_cphMainWell_dlPageSize2_ctl00_ProductView_pOuter');"
style="background-image:url(common/images/bg/bucket.jpg);background-
repeat:repeat-x;">
<img
id="ctl00_cphMainWell_dlPageSize2_ctl00_ProductView_iProductZoom"
class="zoomImage" src="http://localhost:5640/HatClub/common/images/
products/18-64-ImageZoom.png" style="vertical-align:top;border-width:
0px;visibility:visible;" />
<div
id="ctl00_cphMainWell_dlPageSize2_ctl00_ProductView_pInner"
class="innerPanel" style="visibility:hidden;">
</div>
function setHoverState(container)
{
var zoomImage = $('#' + container + ' > .zoomImage');
if(zoomImage.length > 0)
{
var opacity = $(zoomImage.get(0)).css('opacity');
$('#' + container + ' > .zoomImage').fadeToggle('fast');
}
}
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing,
callback);
};