javascript - JQuery の mouseenter() と mouseleave()

Question

このデモナビゲーションは、側面に小さなボタンがあり、ボタンにカーソルを合わせると、メニューがウィンドウにスライドします。ホバーは機能していますが、マウスが離れてもまだ開いています。これを修正するには？ちなみに、私はjQueryにかなり慣れていません

ここにhtmlがあります：

<div id="demoNav">
    <button class="open"></button>
    <ul>
        <li><a href="index.html">Home Pagina</a></li>
        <li><a href="product.html">Product Pagina</a></li>
        <li><a href="bestel.html">Bestel Pagina</a></li>
    </ul>
</div>

そして私のjQuery：

$("#demoNav").mouseenter(function(){
       $("#demoNav").animate({marginLeft:'0px'}, 500)
});

さらに情報が必要な場合は、教えてください。さらにコードを提供します。

score 1 · Accepted Answer

これを試して：

$("#demoNav").hover(

function () {
    $(this).animate({
        marginLeft: '0px'
    }, 500)
},

function () {
    $(this).animate({
        marginLeft: '50px'
    }, 500)
});

score 1 · Accepted Answer

あなたは実際に再び隠すように言っていません。

そうは言っても、この CSS の代替案を提案したいと思います。

#demoNav {
    transition:margin-left 0.5s ease;
    -webkit-transition:margin-left 0.5s ease;
}
#demoNav:hover {
    margin-left:0;
}

score 0 · Accepted Answer

あなたはコーディングしましmouseenterたが、コーディングするのを忘れましたmouseleave event

これらの行をjQueryに追加します

$("#demoNav").mouseleave(function(){
       $("#demoNav").animate({'marginLeft':'50px'}, 500)
});

ここでの実例：

http://jsfiddle.net/EP6wR/

しかし、よりクリーンなホバーメソッドを使用することをお勧めします

syntax: $(selector).hover(handlerIn, handlerOut)

score 0 · Accepted Answer

このソリューションが機能する可能性があります

 $('#demoNav .open').on("mouseenter", function(){  $(this).parent().animate({marginLeft:'0px'}, 500); });
 $('#demoNav').on("mouseleave", function(){  $(this).animate({marginLeft:'50px'}, 500); });

これにより、ボタンをホバーするとペインがアクティブになりますが、divを離れると、左に移動して再び動作します

score 0 · Accepted Answer

mouseleave イベントを追加します -

$('#demoNav').mouseleave(function(){
   $("#demoNav").animate({marginLeft:'50px'}, 500)
});

score 0 · Accepted Answer

jQuery を使用します。

$("#demoNav").hover(function(){
    // do something when mouse hover           
},function(){
    //do some thing when mouseout
});

javascript - JQuery の mouseenter() と mouseleave()

6 に答える 6

Related

Reference