[jQuery] MouseOver/MouseOut Hover

[Mike]

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);
};