Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Fix #7641: .animate() should accept "auto" and "" (empty string) values #408

Closed
wants to merge 5 commits into from

3 participants

Louis-Rémi Babé Timmy Willison Dave Methvin
Louis-Rémi Babé

This PR fixes a "patchwelcome" bug in 10 short lines of code.
Unit-tests included.

http://bugs.jquery.com/ticket/7641 (was "patchwelcome", I just reopened it)
http://bugs.jquery.com/ticket/9482

Timmy Willison
Collaborator

Correct me if I'm wrong, but won't this only work if there are uncomputed styles set that we can fall back to? For instance, the default value of width is "auto" and unless a width is set somewhere in the user css that isn't auto, we still can't do the animation. Doesn't sound like full support of animating "auto".

Louis-Rémi Babé

That shouldn't be a problem since we use the computed style of the element

Timmy Willison
Collaborator

Which will return 'auto' in some cases.

Dave Methvin
Owner

OK, so this pull is no good? Or @louisremi do you think you can solve the problem?

Louis-Rémi Babé

Sorry, the discussion continued in the bug report and on IRC:

"The problem of the "auto" value returned for computed style is also present in other part of the effects code, see how jQuery.fx.cur() deals with it. This didn't prevent us from writing the effect component ;-)"

I think Timmywil agreed with that (we can discuss it again if necessary).

Dave Methvin
Owner

If the premise of this PR is still okay, it needs to be updated before it can be merged. Not sure where it stands.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
18 src/effects.js
@@ -210,7 +210,16 @@ jQuery.fn.extend({
210 210 e = new jQuery.fx( this, opt, p );
211 211 val = prop[ p ];
212 212
213   - if ( rfxtypes.test(val) ) {
  213 + if ( val === "auto" || val === "" ) {
  214 + // We need to compute ending value
  215 + start = e.cur();
  216 + jQuery.style( this, p, val );
  217 + end = e.cur();
  218 + jQuery.style( this, p, start );
  219 +
  220 + e.custom( start, end, jQuery.cssNumber[ p ] ? "" : "px", val );
  221 +
  222 + } else if ( rfxtypes.test(val) ) {
214 223 e[ val === "toggle" ? hidden ? "show" : "hide" : val ]();
215 224
216 225 } else {
@@ -390,7 +399,7 @@ jQuery.fx.prototype = {
390 399 },
391 400
392 401 // Start an animation from one number to another
393   - custom: function( from, to, unit ) {
  402 + custom: function( from, to, unit, eventual ) {
394 403 var self = this,
395 404 fx = jQuery.fx,
396 405 raf;
@@ -398,6 +407,7 @@ jQuery.fx.prototype = {
398 407 this.startTime = fxNow || createFxNow();
399 408 this.start = from;
400 409 this.end = to;
  410 + this.eventual = eventual;
401 411 this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
402 412 this.now = this.start;
403 413 this.pos = this.state = 0;
@@ -463,6 +473,10 @@ jQuery.fx.prototype = {
463 473 this.now = this.end;
464 474 this.pos = this.state = 1;
465 475 this.update();
  476 + if ( this.eventual !== undefined ) {
  477 + // Set final value to null or auto
  478 + jQuery.style( this.elem, this.prop, this.eventual );
  479 + }
466 480
467 481 options.animatedProperties[ this.prop ] = true;
468 482
5 test/data/testsuite.css
@@ -121,3 +121,8 @@ dfn { display: none; }
121 121 /* #9239 Attach a background to the body( avoid crashes in removing the test element in support ) */
122 122 body, div { background: url(http://www.ctemploymentlawblog.com/test.jpg) no-repeat -1000px 0; }
123 123
  124 +/* #7641 and #9482 animate to auto and null values */
  125 +#qunit-fixture .autoNull {
  126 + width: 50px;
  127 + height: 10px;
  128 +}
36 test/unit/effects.js
@@ -1030,7 +1030,7 @@ test( "animate properties missing px w/ opacity as last (#9074)", 2, function()
1030 1030 }, 100);
1031 1031 });
1032 1032
1033   -test("callbacks should fire in correct order (#9100)", function() {
  1033 +test( "callbacks should fire in correct order (#9100)", function() {
1034 1034 stop();
1035 1035 var a = 1,
1036 1036 cb = 0,
@@ -1045,3 +1045,37 @@ test("callbacks should fire in correct order (#9100)", function() {
1045 1045 }
1046 1046 });
1047 1047 });
  1048 +
  1049 +test( "animate to auto and \"\" (empty string) values (#7641)", function() {
  1050 + expect(8);
  1051 + stop();
  1052 +
  1053 + var $div = jQuery( "<div class='autoNull' style='width: 100px;'></div>" ).appendTo("#qunit-fixture"),
  1054 + $span = jQuery( "<span class='autoNull' style='width: 100px;'></span>" ).appendTo("#qunit-fixture");
  1055 + jQuery("#qunit-fixture").css({
  1056 + width: "120px",
  1057 + height: "120px"
  1058 + });
  1059 +
  1060 + $div.animate( {width: "auto"}, 13, function() {
  1061 + ok( $div.width() > 100, "computed width of a block element is larger than 100 when width is auto" );
  1062 + equal( jQuery.style( $div[0], "width" ), "auto", "after the animation to auto, the inline width is auto" );
  1063 +
  1064 + $div.animate( {width: ""}, 13, function() {
  1065 + equal( $div.width(), 50, "computed width of a block element is equal to its CSS width" );
  1066 + ok( !jQuery.style( $div[0], "width" ), "after the animation to \"\", there is no inline width" );
  1067 + });
  1068 + });
  1069 +
  1070 + $span.animate( {width: "auto"}, 13, function() {
  1071 + var width = $span.width();
  1072 + equal( width, 0, "computed width of an inline element is 0 when width is auto" );
  1073 + equal( jQuery.style( $span[0], "width" ), "auto", "after the animation to auto, the inline width is auto" );
  1074 +
  1075 + $span.animate( {width: ""}, 13, function() {
  1076 + equal( $span.width(), 50, "computed width of an inline element is equal to its CSS width" );
  1077 + ok( !jQuery.style( $span[0], "width" ), "after the animation to \"\", there is no inline width" );
  1078 + start();
  1079 + });
  1080 + });
  1081 +});

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.