jquery - jQuery: slideDown() はスライドを元に戻します

Question

再現性の高い問題があります

slidesDown() の後、約 50% の時間で上にスライドします。jQuery コードは非常に単純です。

$( document ).ready(function() {
var slideOptions = {
    duration: 500,
    easing: 'linear'
};

$( 'li.navtitle' ).mouseenter(function() {
    $( this ).next().slideDown();
    return false;
});
$( 'ul.navunit' ).mouseleave(function() {
    $( this ).find( 'li.navcontent' ).delay(800).slideUp();
    return false;
});
});

HTML は次のとおりです。

<ul id="navigation">
  <li class="navtop">   
    <ul class="navunit">
      <li class="navtitle unselectable" unselectable="on">TITLE</li>
      <li class="navcontent"><p class="textcontent">CONTENT HERE</li>
    </ul>
  </li>
<!-- Some more navtop/navunits... -->
</ul>

前述のように、これは約 50% の確率で機能します。ただし、多くの場合、マウスが navunit ul 内にある間、navcontent li は slideUp() します。

私が間違っていることについての手がかりはありますか？

Answer 1

stop()アニメーションに を追加する必要があるようです。JS コードは以下にありますが、ここに JSFiddle へのリンクがあり、動作を確認できますhttp://jsfiddle.net/MDpxD/

$( document ).ready(function() {
var slideOptions = {
    duration: 500,
    easing: 'linear'
};

$( 'li.navtitle' ).mouseenter(function() {
    $( this ).next().stop().slideDown();
    return false;
});
$( 'ul.navunit' ).mouseleave(function() {
    $( this ).find( 'li.navcontent' ).stop().delay(800).slideUp();
    return false;
});
});

Answer 2

これは、2 回トリガーされるために発生する可能性があります。これを関数の最後に追加してみてください:

    $(this).unbind("mouseenter");
$(this).unbind("bind");
$(this).die();