Jquery events keep stacking and won't start until the previous event finishes

The code below basically fades all the images to 70% in the contact class then when it is hovered it's opacity changes to 100% if u start to hover across multiple images or multiple hover events occur it stacks all the events and doesn't start the next event until the previous event is completed.

$(".contact img").fadeTo("slow", 0.7); 
$(".contact img").hover(function(){
    var titleID = $(this).attr('id');
    $("#" + titleID).fadeTo("fast", 1); 
},function(){
    var titleID = $(this).attr('id');
    $("#" + titleID).fadeTo(开发者_开发知识库"slow", 0.7); // This sets the opacity back to 60% on mouseout
});

Any and all help would be gladly appreciated.

Thanks

Animations are queuing. If you want to abort the current animation, call .stop() ^[docs]:

$(this).stop().fadeTo("fast", 1); 

As @Richard mentions in his comment, it seems you could just use $(this). What you are doing is getting the ID of the current element and then let jQuery find that element with a selector. But you already have a reference to the element...