Skip to main content

Bug Tracker

Side navigation

#13939 closed bug (fixed)

Opened May 25, 2013 02:06PM UTC

Closed May 26, 2013 11:56PM UTC

Last modified May 29, 2013 06:36PM UTC

1.10.0 breaks relative animation

Reported by: david.bau@gmail.com Owned by: gibson042
Priority: high Milestone: 1.10.1/2.0.2
Component: effects Version: 1.10.0
Keywords: Cc:
Blocked by: Blocking:
Description

Relative animation (using += or -=) is broken in 1.10.0.

For example, $('h1').animate({marginLeft: '+=100px'}); does not work.

Minimal repro:

http://jsfiddle.net/Me7QK/

(The example is broken on 1.10.0 but tested to work on 1.9.1, 1.8.3, 1.7.2, 1.6.4.)

This seems to be a bug in the default "*" tweener, where start is getting left as 'false' instead of actually being set to the actual start value in the normal case of a pixel-unit property. The following addition of an else for the if on line 19-41 of effects.js is one possible fix.

if ( start && start[ 3 ] !== unit ) {
  ...
} else {
  start = +target || 0;
}
Attachments (0)
Change History (12)

Changed May 26, 2013 03:03PM UTC by gibson042 comment:1

component: unfiledeffects
milestone: None1.10.1/2.0.2
owner: → gibson042
priority: undecidedhigh
status: newassigned

Confirmed. We have no unit tests covering relative animations. :O

Changed May 26, 2013 11:56PM UTC by Richard Gibson comment:2

resolution: → fixed
status: assignedclosed

Fix #13939: Same-unit relative animations

(cherry picked from commit 00231d5d94d3374d53bfe79e04ba253250c73087)

Changeset: 26980c6ec96369bbaf87be1e405594df8ec3f0dc

Changed May 27, 2013 03:14PM UTC by ajpiano comment:3

If relative animations are completely broken in 1.10.1 but fixed now, I feel like this might necessitate an immediate 1.10.2, otherwise we're sure to get a fair number of dupe reports.

Changed May 28, 2013 01:29PM UTC by scottgonzalez comment:4

#13952 is a duplicate of this ticket.

Changed May 28, 2013 01:29PM UTC by scottgonzalez comment:5

#13940 is a duplicate of this ticket.

Changed May 28, 2013 02:36PM UTC by 503593966@qq.com comment:6

But I thought ticket #13952 (closed bug) is not the same bug.

#13952 the point is the 'arguments.callee', not the 'px'; when the animate done, the (function(){})() just run once.

http://jsfiddle.net/reyhappen/wF7VK/1/

<div id="book" style="position:relative;width:200px;height:200px;background:green;"></div>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
$(function(){
    (function () {
        $("#book").animate({left: "+=10px"}, 1000, arguments.callee);
    })();
})
</script>

Changed May 28, 2013 02:40PM UTC by scottgonzalez comment:7

If it's a separate bug, please create a reduced test case that doesn't use relative animations and shows the problem. Add a link to that test case on the other ticket and we'll re-open.

Changed May 29, 2013 05:42AM UTC by anonymous comment:8

I think this is a very serious bug. Must be released hotfix.

Changed May 29, 2013 12:55PM UTC by scottgonzalez comment:9

#13960 is a duplicate of this ticket.

Changed May 29, 2013 05:47PM UTC by meetselva@gmail.com comment:10

The issue seems to when calculating tween.end. Changing

// 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 ];

to

// 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 ];

fixed the issue.

Fix tested with fiddle: http://jsfiddle.net/xEhuR/ [check line 8878 in script window]

Changed May 29, 2013 06:04PM UTC by gibson042 comment:11

Yes meetselva, this was fixed 3 days ago by https://github.com/jquery/jquery/commit/00231d5d94d3374d53bfe79e04ba253250c73087 and will be in the next release.

Changed May 29, 2013 06:36PM UTC by scottgonzalez comment:12

#13963 is a duplicate of this ticket.