div：使用带有“慢”选项的 jQuery 显示和隐藏创建有趣的动画效果，并且 div 继续上下移动......

Question

我有一个在 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>

提前致谢。

Answer 1

试试这个：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");
});

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

Answer 2

试试这个：

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

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