簡體   English   中英

在多個懸停事件上停止傳播

[英]Stopping propagation on multiple hover event

我的主頁包含多個框。

在每個框上,當mouseover在 in 或 out 時,標題消失,內容出現。

它工作正常。

問題是,在短時間內將鼠標懸停在一個以上的盒子上時,會一團糟。

$( ".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在另一個框上時,如何停止之前的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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM