正在停止对多个悬停事件的传播

Stopping propagation on multiple hover event

本文关键字：悬停 事件 传播      更新时间：2023-09-26

我的主页包含多个框。

在每个框中，当mouseover输入或输出时，标题消失，内容出现。

它运行良好。

问题是，当鼠标在短时间内覆盖多个盒子时，就会一团糟。

$( ".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);
    });
});

当鼠标悬停在另一个框上时，如何停止先前的mouseover反应？

编辑：

我的原始代码：http://jsfiddle.net/tz3d6ct6/

Kumar的代码与jquery完美结合>1.6（我必须使用jquery1.4）http://jsfiddle.net/hrkf5p7w/

尝试使用stop（），无需使用循环绑定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);    
});

尝试不使用delay()类，

$(".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>

相关文章：