如何中斷懸停的處理程序輸出

我有一個對象，我們稱之爲「按鈕」。當你按下按鈕時，會使另一個對象「Info」滑落。當然，當你的鼠標離開Button時，Info滑動並消失。但是，Info有一個鏈接，用戶可能想要點擊它。我可以延遲信息的上升，但在達到信息後無法停止。

這是我正在使用的代碼。

$("#button").hover(function(){ 
    $("#info").slideDown("fast"); 
}, function(){ //the handlerOut 
    $("#info").delay(1000).slideUp("fast"); 
});

如何告訴Button在我將它懸停後不要滑動信息？

來源

2011-07-11 fixmycode

您可以使用stop()停止任何當前排隊的動畫。請注意，stop()會停止當前正在運行的任何動畫，因此在這種情況下，我們需要停止動畫和顯示該元素。

（順便說一句，解決行爲問題之前，你可能已經想使用stop()防止反彈的效果，如果用戶將鼠標移動和退出按鈕的速度非常快）：

$("#button").hover(function(){ 
    $("#info").stop(true,true).slideDown("fast"); 
}, function(){ //the handlerOut 
    $("#info").stop(true,true).delay(1000).slideUp("fast"); 
});

然後，得到你想要的行爲，我們需要添加一個懸停處理程序到#info，停止當前動畫，然後根據情況顯示或隱藏信息元素。既然我們已經有了一個處理程序，這樣做，可以在#info選擇剛剛添加到懸停電話：

$("#button, #info").hover(function(){ 
    $("#info").stop(true,true).slideDown("fast"); 
}, function(){ //the handlerOut 
    $("#info").stop(true,true).delay(1000).slideUp("fast"); 
});

這裏有一個working jsfiddle

來源

2011-07-11 10:24:51

非常好，乾淨的方法！（我昨晚在JQuery文檔中看到了反彈問題的停止方法，所以這是我的代碼的一部分。）謝謝！真的，我不知道可以用這種方式來使用事件。 – fixmycode

通常解決這個問題，就是要設置延遲在相關元素隱藏之前，並且如果用戶在延遲期間懸停該元素，則完全取消隱藏。

$("#button").hover(function(){ 
    $("#info").slideDown("fast"); 
}, function(){ //the handlerOut 
    $('#info').data('timeout', setTimeout(function(){ 
      $("#info").slideUp("fast"); 
    },1000)); 
}); 

$('#info').hover(function(){ 
    clearTimeout($(this).data('timeout')); // cancel the delayed code execution 
}, function(){ //the handlerOut 
    $(this).data('timeout', setTimeout(function(){ 
      $("#info").slideUp("fast"); 
    },1000)); 
});

演示在http://jsfiddle.net/gaby/VjLM2/

來源

2011-07-11 10:31:13

http://jsfiddle.net/

<a href="javasctipt:" class="hoverNav" target="info"> 
    show info 
</a> 

<div id="info" class="hoverNavDescription"> 
Iam info text 
</div> 






var curVisible=""; 
jQuery(function(){ 
    jQuery('.hoverNav').bind('mouseover',function(){ 
     var elm=jQuery(this), 
      targetName=elm.attr('target') 
      ; 
     curVisible=targetName; 
     jQuery('#'+targetName).slideDown(); 
     jQuery(window).bind('click',handleMouseOut) 

    }); 

function handleMouseOut(e) 
{ 
    if($(e.target).attr('id')!=curVisible) 
    { 
     jQuery('#'+curVisible).slideUp(); 
     curVisible=""; 
     jQuery(window).unbind(handleMouseOut); 
    } 
}

}）;

.hoverNavDescription 
{ 
    display:none; 
    background-color:red; 
    height:100px; 
    width:100px; 
}

來源

2011-07-11 10:46:44

如何中斷懸停的處理程序輸出

回答

相關問題