1

Div内でDIVを表示および非表示にするという面白い問題があります。マウスがメインの div をホバーするたびに、小さな div に削除アイコンと更新アイコンが表示されるようなユーザー エクスペリエンスを作成しようとしています。「遅い」オプションなしで表示/非表示を使用すると、完全に正常に動作しますが、「遅い」オプションを使用すると、マウスがメイン div から何マイルも離れている場合でも、マウス オーバー イベントごとに 2 回表示と非表示が開始されます。マウスが 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>

前もって感謝します。

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 に答える