0

カードリストを書いています。
カード リスト内の li 要素には、mouseenter と mouseleave の両方のイベントがあります。

mouseenterCard: function(index) {
    var nOnRight = index+2;
    var n = index+1;

    if (n!=1) {
        $('#cards-list li:nth-child('+n.toString()+')').animate({'margin-left': '30px'},
                                                                 "fast",
                                                                 function() {

                                                                 });
    }
    $('#cards-list li:nth-child('+nOnRight.toString()+')').animate({'margin-left': '30px'},
                                                                   "fast");
},
mouseleaveCard: function(index) {
    var nOnRight = index+2;
    var n = index+1;
    if (n!=1) {
        $('#cards-list li:nth-child('+n.toString()+')').animate({'margin-left': marginLeft.toString()+'px'},
                                                                 "fast",
                                                                 function() {

                                                                 });
    }
    $('#cards-list li:nth-child('+nOnRight.toString()+')').animate({'margin-left': marginLeft.toString()+'px'},
                                                                   "fast");
}

$('#cards-list').on('mouseenter', 'li' ,function(e){
    CardList.getInstance().mouseenterCard($(this).index());
});

$('#cards-list').on('mouseleave', 'li' ,function(e){
    CardList.getInstance().mouseleaveCard($(this).index());
});

デモはこちら
2 つの要素をすばやく切り替えると、li 要素の動作がおかしくなりました。
何が問題ですか？

4

2 に答える 2

0

イベントのデバウンス/スロットリングを試すことができます。 http://benalman.com/projects/jquery-throttle-debounce-plugin/

アニメーションを実行している場合は、mouseleaveイベントで.stop（）を使用してアニメーションを中断します

于 2013-02-18T14:34:45.350 に答える
0

同じ要素を複数回移動すると、アニメーションがキューに入れられます。.stop次のいずれかでアニメーションを停止する必要があります.finish(後者はアニメーションを即座に終了します)。

$('#cards-list li:nth-child('+nOnRight.toString()+')').stop().animate(...
于 2013-02-18T14:33:11.430 に答える