Stopping propagation on multiple hover event

Question

My home page contains multiple boxes.

On each boxes, when mouseover in or out , the title disappears and the content appears.

It works fine.

The problem is that when mouseovering more than one box on a short period of time, it is a mess.

$( ".views-field-wrapper" ).each(function(){         
    $( this ).hover(function() {        
        $( "#front_panel",this ).fadeOut(400);
        $( "#back_panel",this ).delay(500).fadeIn(1000);        
      }, function(){           
        $( "#back_panel",this ).fadeOut(400);
        $( "#front_panel",this ).delay(500).fadeIn(1000);
    });
});

How can I stop the previous mouseover reaction when mouseovering another box?

EDIT :

My intial code: http://jsfiddle.net/tz3d6ct6/

Kumar's code that works perfectly with jquery > 1.6 (I must use jquery1.4) http://jsfiddle.net/hrkf5p7w/

Answer 1

Try to use stop() and no need to use loop to bind hover event,

$( ".views-field-wrapper" ).hover(function() { // no need to use each loop
        $( "#front_panel",this ).stop(true).fadeOut(400);
        $( "#back_panel",this ).delay(500).fadeIn(1000);
    }, function(){
        $( "#back_panel",this ).stop(true).fadeOut(400);
        $( "#front_panel",this ).delay(500).fadeIn(1000);    
});

Try it without using using delay() like,

$(".views-field-wrapper").hover(function () { // no need to use each loop
    $("#front_panel", this).stop(true).fadeOut(400);
    $("#back_panel", this).fadeIn(1000);

}, function () {
    $("#back_panel", this).stop(true).fadeOut(400);
    $("#front_panel", this).fadeIn(1000);
});

$(".views-field-wrapper").hover(function () { // no need to use each loop
    $("#front_panel", this).stop(true).fadeOut(400);
    $("#back_panel", this).fadeIn(1000);
    
}, function () {
    $("#back_panel", this).stop(true).fadeOut(400);
    $("#front_panel", this).fadeIn(1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='views-field-wrapper type-t nodetype-t'>
    <div id='front_panel'>title</div>
    <div style='display:none' id='back_panel'>teaser</div>
</div>