Bug Tracker

#10193 closed bug (invalid)

Opened September 02, 2011 12:03PM UTC

Closed September 02, 2011 12:25PM UTC

Last modified December 20, 2011 01:23PM UTC

animate from width:0px to width:100% causing exception

Reported by: twirls@gmail.com Owned by:
Priority: low Milestone: None
Component: misc Version: 1.6.3
Keywords: Cc:
Blocked by: Blocking:
Description

In function animate there is following code:

if (unit !== "px") {
    jQuery.style(self, name, (end || 1) + unit);
    start = ((end || 1) / e.cur()) * start;
    jQuery.style(self, name, start + unit);
}

Should probably check if e.cur() is zero.

}

Attachments (0)
Change History (2)

Changed September 02, 2011 12:25PM UTC by addyosmani comment:1

component: unfiled → misc
priority: undecided → low
resolution: → invalid
status: new → closed

Thanks for the suggestion. If you take a look through the jQuery source, you'll see that this is handled appropriately in jQuery.fx when calling e.cur();

{{{

e = new jQuery.fx( this, opt, p );

and then later down in jQuery.fx(..)

Empty strings, null, undefined and "auto" are converted to 0,

complex values such as "rotate(1rad)" are returned as is,

simple values such as "10px" are parsed to Float.

and if you check jQuery.fx.prototype..

r = jQuery.css( this.elem, this.prop );

return isNaN( parsed = parseFloat( r ) ) ? !r || r === "auto" ? 0 : r : parsed;

'

Changed December 20, 2011 01:23PM UTC by spoiltnr1@gmx.at comment:2

I experienced the same problem (with opacity).

The missing simple zero-check prevents some animations to start from the correct start value.

As far as I can see even jQuery.fx.prototype.step cant handle this because "now" and "start" stay NaN, so it isn't handled! I.e. the jQuery.fx.prototype.step.opacity (at line 8823, 1.7.1) receives "NaN" in parameter fx.now!

BTW: What should this line actually do? Should it take another animation in account? Then why not just do 

start = e.cur();

?

Here are 2 test cases:

Fade out: http://jsfiddle.net/M9WLL/1/ (works)

Fade in: http://jsfiddle.net/VVNrN/3/ (doesn't work - style.opacity value equals end-value during whole animation!)

You can even try to use start values other than 0 - doesn't work either.

Please apply the supposed check and these blurry edge-cases are gone and it just works!