0

ユーザーがボタンをクリックしたときに、要素の背景を現在の位置からアニメーション化しようとしています。最初のクリックでこれを行うことはできますが、その後のクリックは失敗します。

これが私のコードです...

var testme;

$(document).ready(function(){     
    $(".navleft").live("click", function() {
        testme = parseInt($(this).css("background-position").replace("% 0%", "").replace("px 0%", ""));
        $(this).parent().animate({backgroundPosition: (testme + 297) + "px"}, 500);
        $(this).parent().find("p").text(testme);
    });
});

編集：

$(".navleft").live("click", function() {
    $(this).parent().animate({backgroundPosition: "+=297"}, 500);
});

以下に示すように、これは、クリックするたびに0にリセットされてから再度アニメーション化されるIEを使用している場合を除いて、うまく機能します。

これが私の言いたいことへのリンクです... http：//jsfiddle.net/TdaSV/

解決策（正しい方向に押された結果）：

$(".navleft").live("click", function() {
    $(this).parent().animate({'background-position-x': '+=297'}, 500);
});
4

1 に答える 1

1

最初に前のアニメーションを停止してから、新しいアニメーションを開始する必要があります。

$(this).parent().stop(true, true).animate({backgroundPosition:...

また、現在の背景位置に297ピクセルを追加する必要がある場合は、次の手順に従って現在の位置を読み取る必要はありません。

$(this).parent().animate({backgroundPosition: "+=297"}, 500);

jqueryWebサイトで他の例を参照してください。

于 2011-07-11T12:34:47.160 に答える