While creating the animated hover effect one of the common problem you may face is multiple queued animations, when you place and remove the mouse cursor rapidly. Because, in this situation mouseenter or mouseleave events are triggered quickly before the animation complete. To avoid this problem and create a nice and smooth hover effect you can add the stop(true, true) to the method chain, like this:

Example

<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>

Note: The jQuery method stop(true, true) clears all the queued animations and jumps the current animation to the final value.