Question

I have an effect using the hover function in jquery, problem is the effect repeats when the mouse leaves the element.

How can i prevent the same effect happening when the mouse leves the element rather then repeat the effect?

The effect is a shine image which slides over another image when hovered over, here my code:

jQuery(document).ready(function() {    
 /* When a thumbnail is hovered over do shine */
$('.large_thumb').hover(function()
{
    $(this).find(".large_thumb_shine").stop().css("background-position","-99px 0");

    $(this).find(".large_thumb_shine").stop().animate({ backgroundPosition: '99px 0'},700); 

});

HTML:

<div class="large_thumb">
<img src="images/thumbnails/sample2.jpg" class="large_thumb_image" alt="thumb" />
<div class="large_thumb_shine"></div>
</div>

CSS:

.large_thumb{
width:74px; height:74px;
border:solid black 2px;
}
img.large_thumb_image{
position:absolute;
}
.large_thumb_shine    {
width:74px; height:74px;
background:url(images/interface/shine.png) no-repeat;
position:absolute;
background-position:-99px 0;


}

Answer 1

I think you can pass 2nd callback to jQuery‘s hover method.

$('.element').hover(function(){
    // this will get executed when you hover the element

}, function() {
    // this will get executed when you leave the element
    // So, you can stop any effect here.

});