jQuery animate += 和最新版本

Question

每次单击 div“蓝色”时，它都会移动 100 像素。它工作得很好，有一天我意识到它停止工作了。在尝试了很多事情之后，我发现问题出在最新版本的 jQuery 1.10 现在它只移动了 100px 一次。就像它忽略了 += 一样。我找不到它是否已被弃用？如果是这样，现在正确的做法是什么？

你可以看到它在这里工作：http://jsfiddle.net/RB4eJ/1/
（这在 jQuery 1.9.1 中有效。但它不在 1.10 中）

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

Answer 1

如果这是一个错误，我希望他们修复它，因为它很有用。但是现在你可以这样做：

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

See working demo with jQuery 2.x

Performance test

Answer 2

在使用 += 或 -= 时，它看起来像 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

Answer 3

这确实是 1.10.0 版本中的一个错误，并在 1.10.1 中修复

http://blog.jquery.com/2013/05/30/jquery-1-10-1-and-2-0-2-released/

http://bugs.jquery.com/ticket/13939