Bug Tracker

Ticket #13939 (closed bug: fixed)

Opened 18 months ago

Last modified 18 months ago

1.10.0 breaks relative animation

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

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

Change History

comment:1 Changed 18 months ago by gibson042

  • Owner set to gibson042
  • Priority changed from undecided to high
  • Status changed from new to assigned
  • Component changed from unfiled to effects
  • Milestone changed from None to 1.10.1/2.0.2

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

comment:2 Changed 18 months ago by Richard Gibson

  • Status changed from assigned to closed
  • Resolution set to fixed

Fix #13939: Same-unit relative animations (cherry picked from commit 00231d5d94d3374d53bfe79e04ba253250c73087)

Changeset: 26980c6ec96369bbaf87be1e405594df8ec3f0dc

comment:3 Changed 18 months ago by ajpiano

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.

comment:4 Changed 18 months ago by scott.gonzalez

#13952 is a duplicate of this ticket.

comment:5 Changed 18 months ago by scott.gonzalez

#13940 is a duplicate of this ticket.

comment:6 Changed 18 months ago by 503593966@…

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>

comment:7 Changed 18 months ago by scott.gonzalez

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.

comment:8 Changed 18 months ago by anonymous

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

comment:9 Changed 18 months ago by scott.gonzalez

#13960 is a duplicate of this ticket.

comment:10 Changed 18 months ago by meetselva@…

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]

comment:11 Changed 18 months ago by gibson042

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

comment:12 Changed 18 months ago by scott.gonzalez

#13963 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.