0

ホバー時にliを上げて、マウスが離れたときに元の状態に戻したいです。これは機能しますが、マウスが離れているときに別の時間にホバー animat(up) を実行するため、遅延と非効率的なコードが発生します。これをより効率的にするための提案はありますか？

function HoverListItem() {
    var menuItem = $('#menu > li')
    menuItem.on('hover', function(){
        console.log('up');
            $(this).animate({
                'marginTop': '-10px'
            }, 150);
        });

    menuItem.on('mouseleave', function(){
        console.log('down');
            $(this).animate({
                'marginTop': '0px'
            }, 150);
        })
    };
4

1 に答える 1

2

これは、アニメーションがキューに入れられているためです。新しいアニメーションを発行する前に、キューをクリアしてください。私自身も、hover() を使用して mouseenter と mouseleave を登録することを好みます。

$("#menu > li")
  .css("position", "relative")
  .hover(
    function() {
        $(this).clearQueue().animate({
            bottom: 10
        });
    },
    function() {
        $(this).clearQueue().animate({
            bottom: 0
        });
    }

例: http://jsfiddle.net/6xXGw/

于 2012-11-03T12:23:28.670 に答える