2

メニューLIに応じて、メニューの背景をアニメーション化しようとしています。

私がこれまでに持っているスクリプトはhttp://jsfiddle.net/d9LHV/70/です。

$(function() {
    $('.top-nav ul li').mouseenter(function() {
        var position = $(this).position()
        $(this).parent().animate({
            'backgroundPosition': position.left}, {duration: 150})
    })
    .mouseout(function() {
        $(this).parent().animate({})
    })
});

動作しているように見えますが、jQueryについて何かが気に障っていますが、jQueryの経験がなく、入力が必要です。

.hoverを使用するか、.mouseout部分を削除すると、アニメーションが途切れ途切れになります。

結果を得るより良い方法はありますか？または、スムーズに機能させるために空のマウスアウトが必要な理由がわからないため、ロジックに問題があります。

4

2 に答える 2

1

すべてがびくびくと途切れ途切れになる理由は、同じ要素で複数のアニメーション イベントが発生するためです。そのため、すべてのアニメーション イベントがキューに入れられ、次々に実行されます。

.stop()次のように、別のアニメーションを開始する前に関数を使用することができます。

$(function() {
    $('.top-nav ul li').mouseenter(function() {
        var position = $(this).position();
        $(this).parent().stop().animate({'backgroundPosition': position.left}, 150);
    });
});​

ここでの動作デモ: http://jsfiddle.net/pulkitm/d9LHV/71/

お役に立てれば！

于 2012-11-21T20:55:17.187 に答える
0

次のように構成します（セミコロンを含む）：

$(function() {
    $('.top-nav ul li').mouseenter(function() {
        var position = $(this).position();
        $(this).parent().animate({
            'backgroundPosition': position.left
        }, 150);
    })
    .mouseout(function() {
        $(this).parent().animate();
    })
});​
于 2012-11-21T20:50:41.140 に答える