How to change the effect on image hover?

Question

I have HTML code like this:

<ul id="foo2">
<li>
    <img src="images/dandb.png" width="238" height="132" title="<span class='link-hover'>Merit Direct</span></br><br/> Polished, high-impact content including whitepapers, research reports, blog articles, advertorials," alt="" />
</li>
<li>
    <img src="images/demand_new.png" width="238" height="132" title="<span class='link-hover'>Merit Direct</span></br><br/> Polished, high-impact content including whitepapers, research reports, blog articles, advertorials," alt="" />
</li>
</ul>

and on hover of image i have done one sliding effect using bellow script:

$(document).ready(function(){                           
    var thumbs = $("#foo2 li img");     
    for (var i = 0, ii = thumbs.length; i < ii; i++){
        if (thumbs[i].title && thumbs[i].title.length > 0)
        {           
            var imgtitle = thumbs[i].title;     
            $(thumbs[i]).wrap('<div class="wrapperblue" />').               
            after('<div class=\'captionblue\'>' + imgtitle + '</div>').
            removeAttr('title');
        }                   
    }
    $('.wrapperblue').hover(
        function(){
            $(this).find('img').animate({opacity: "6"}, 200);       
            $(this).find('.captionblue').animate({top:"-309px"}, 350);          
        }, 
        function(){
            $(this).find('img').animate({opacity: "6"}, 200);                   
            $(this).find('.captionblue').animate({top:"0px"},200);
        }       
    );          
});

by running this code the hover effect on image is done very fast. I want that effect should be smooth and if the cursor is out of the image hover area fast then the effect should be stopped at that time . it must not complete its transition.

How can i do this?

Answer 1

You should adjust the timer and stop function for stopping on release

Change this

 $(this).find('img').animate({opacity: "6"}, 200);  

to this on all lines

 $(this).find('img').stop().animate({opacity: "6"}, 3000);  

Note the changes stop() and 3000 (speed)

Edit: Changed your code

$('.wrapperblue').hover(
        function(){
            $(this).find('img').stop().animate({opacity: "6"}, 3000);       
            $(this).find('.captionblue').stop().animate({top:"-309px"}, 3000);          
        }, 
        function(){
            $(this).find('img').stop().animate({opacity: "6"}, 3000);                   
            $(this).find('.captionblue').stop().animate({top:"0px"},3000);
        }