jquery - jQuery animate += と最新バージョン

Question

div「青」をクリックするたびに、100px移動します。それはうまく機能し、ある日、機能しなくなったことに気付きました。多くのことを試した後、問題はjQuery 1.10の最新バージョンにあることがわかりました。今では100pxを1回移動するだけです。+= を無視するのと同じです。非推奨かどうかわかりませんでしたか？もしそうなら、今それを行う正しい方法は何ですか？

http://jsfiddle.net/RB4eJ/1/ (これは jQuery 1.9.1 で動作します
が、1.10 では動作しません)

$(function(){
    $(".blue").click(function() {
        $(".blue").animate({left: "+=100"}, 500)    
    });
})

score 8 · Accepted Answer

バグの場合は、便利だったので修正してほしいです。ただし、今のところ、次のようなことができます。

$(".blue").click(function() {
    var new_left = +$(this).css("left").replace("px", "") + 100;
    $(".blue").animate({left: new_left + "px"}, 500)    
});

または@adeneoが提案したように：

$(".blue").click(function() {
    $(this).animate({left: $(this).position().left+100}, 500);  
});

jQuery 2.x で動作するデモを見る

性能テスト

score 0 · Accepted Answer

+=またはを使用すると、animate のバグのように見えます-=。バグは行にあるようです

https://github.com/jquery/jquery/blob/master/src/effects.js#L48-L50

以下はコードリファレンスです。

// If a +=/-= token was provided, we're doing a relative animation
tween.end = parts[ 1 ] ?
    //v--- bug
    start + ( parts[ 1 ] + 1 ) * parts[ 2 ] :  
   +parts[ 2 ];

上記を変更するとバグが修正されるはずです。

// If a +=/-= token was provided, we're doing a relative animation
tween.end = parts[ 1 ] ?
    //v-- changed to tween.start
    tween.start + ( parts[ 1 ] + 1 ) * parts[ 2 ] :  
   +parts[ 2 ];

フィドルでテストされた修正: http://jsfiddle.net/xEhuR/ [8878 行を確認]

注:上記は、問題を特定すること以外にはあまり効果がありません。回避策に固執するか、jQuery からの修正を待つ必要があります。

チケットに投稿http://bugs.jquery.com/ticket/13939?comment:10#comment:10