clearQueue in jQuery

I have a jQuery script that takes an img src, puts the src in hidden div, and enlarge the img with animation when hover the request img. However, when I jump from img to img the clearQueue or stop are not working as needed.

In this sample when I jump slowly from img to another img it works ok, but when I jump fast the img is fadeout totally more and more between img to img.

All I want is to be able to hover fast or slow from img to img and there will be no Queue that left behind.

I will be glad if someone can help me with this.

Here is the code:

$(document).ready(functi开发者_JAVA技巧on(){
    $(".thumb").hover(function(e) {
        $('#popm').css('left',e.pageX+50);
        $('#popm').css('top', e.pageY+50);
        e.preventDefault();
        var src= $(this).attr("src");
        $('.popimg').attr({"src": src});
        $('#popm').stop().fadeIn(100);
        $('.popimg').stop()
            .animate({
                width: '145px', /* Set new width */
                height: '145px' /* Set new height */
            }, 200);
    }, function() {
        $('#popm').stop().fadeOut(100);
        $('.popimg').stop()
            .animate({          
                width: '45px', /* Set new width */
                height: '45px' /* Set new height */ 
        }, 200);
    });
});  

You probably want to do .stop(true, true) instead of just .stop().

Documentation for jQuery.stop() clearly states that stop has two parameters of which first is a boolean to clear animation queue:

.stop( [clearQueue,] [jumpToEnd] )

clearQueue - A Boolean indicating whether to remove queued animation as well. Defaults to false.

jumpToEnd - A Boolean indicating whether to complete the current animation immediately. Defaults to false.