jqueryアニメーション背景位置 - 現在の背景位置を最初に取得する問題

Question

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

ここに私のコードです...

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); 
    }); 
}); 

EDIT：

$(".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); 
}); 

Answer 1

あなたは最初の前のアニメーションを停止する必要がありますし、

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

また、現在の背景位置に297ピクセルを追加する必要がある場合は、 tはshoudl作業以下、現在位置を読んでする必要があります。

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

see more examples in jquery website.