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

[twirls@…]

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.

}

[addyosmani]

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

[spoiltnr1@…]

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!