1

我有一个在 Div 中显示和隐藏 DIV 的有趣问题。我正在尝试创建用户体验，以便当鼠标悬停在主 div 上时，会出现一个带有删除和更新图标的小 div。如果我使用不带“慢”选项的显示/隐藏，它工作得非常好，但是当我使用“慢”选项时，即使鼠标距离主 div 数英里，它也会开始为每个鼠标悬停事件出现和隐藏两次。如果鼠标停留在 div 上，那么出现和消失的显示会一直持续下去。到目前为止我所收集到的，当显示 div 时会触发 mouse out 事件，现在的问题是如何控制它？以下是我的代码：

Javascript：

function ShowCurrProblemSaveDiv(id){
    $(id).find('div').show('slow');      
 }

function HideCurrProblemSaveDiv(id){
    $(id).find('div').hide('slow');
}

HTML：

<div id="PatCurrVisitProblemListDiv" 
   onMouseOver="ShowCurrProblemSaveDiv(this)" 
   onMouseOut="HideCurrProblemSaveDiv(this)">
       <div id="PatCurrVisitProblemSaveDiv" 
            style="background:red;
            display:none;">
            Delete-Update Icons
       </div>
</div>

提前致谢。

4

2 回答 2

5

试试这个：http: //jsfiddle.net/6DU4v/2/

HTML

<div id="PatCurrVisitProblemListDiv">
    Hi there
   <div id="PatCurrVisitProblemSaveDiv"
        style="background:red;
        display:none;">
        Delete-Update Icons
   </div>
</div>

JS

$("#PatCurrVisitProblemListDiv").hover(function(){
    // Stops any animations on this element, and starts a new one
    // acording to which event was called - mouseover, or mouseout
    $(this).find("div").stop().toggle("slow");
});

如您所见，我对其进行了优化以使用最少的代码。:)

于 2012-10-30T08:16:18.410 回答
1

试试这个：

function ShowCurrProblemSaveDiv(id){
    $(id).find('div').stop(true, true).show('slow');      
}

function HideCurrProblemSaveDiv(id){
    $(id).find('div').stop(true, true).hide('slow');
}
于 2012-10-30T08:15:17.993 回答