Stop jQuery hover effect when element is not hovered anymore

Question

My script:

$(window).load(function(){
    $(".inner").hover( function (e) {
        $(this).find(".info").stop().fadeIn(410);
    }, function() {
        $(this).find(".info").stop().fadeOut(410);
    });
});

When I mouseover the div .inner it will play the animation but when I quickly mouse out and mous in again it will stop on the place where I mouse out it, to make it easier.

http://www.sakesalverda.nl/projects/ and hover on a website image and quickly mouse out and hover the image of the website again and you will see it will not fully make the animation

Answer 1

There surely is a jQuery solution, but I would use CSS for this, it's much easier and im most cases the performance is better:

.inner .info {
    opacity: 0;
    -webkit-transition: opacity .42s;
    transition: opacity .4s;
}
.inner:hover .info {
    opacity: 1;
}

Works on all major browsers , but IE8 would need a fallback . One downside is, that IE8 and IE9 won't have the fading effect, but in my opinion, thats a death we can afford to die, as those browsers are at only 5% these days. And the showing / hiding will work, just not as nicely as with modern browsers.