Div:使用带有"慢速"选项的jQuery显示和隐藏创建有趣的动画效果并且div继续上下移动...

Question

我有一个有趣的问题,即在Div中显示和隐藏DIV.我正在尝试创建用户体验,以便当鼠标悬停主div时,会出现一个带有删除和更新图标的小div.如果我使用Show/Hide而不使用"Slow"选项,它的效果非常好但是当我使用"Slow"选项时,即使鼠标距离主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");
});

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