jquery - 分区 : Show and Hide using jQuery with "Slow" option creates funny animated effects and div keep on moving up and down. ..

Question

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

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

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