Skip to main content

Bug Tracker

Side navigation

#2408 closed bug (duplicate)

Opened February 25, 2008 05:25PM UTC

Closed April 16, 2011 11:50PM UTC

Last modified September 27, 2011 03:57AM UTC

Executing the stop() method causes corruption of element's original attributes

Reported by: DanSwitzer2 Owned by: john
Priority: high Milestone:
Component: effects Version: 1.4.4
Keywords: animate stop Cc:
Blocked by: Blocking:
Description

When you execute the stop() method on an animation, some corruption to the original element can occur. This is because the animate() method automatically changes some properties of the element in order to get the correct visual effect.

In normal circumstances the original state of the element is restored during the step() method when the "done" condition is true.

The problem is when you call the stop() method on an element these original properties are overwritten with properties of the element in it's current stopped state.

The easiest way to see this bug is on this example page:

http://www.pengoworks.com/workshop/jquery/stop_bug.htm

If you click the "Timed Animation" button you'll see that the "overflow" on "Menu 1" is lost.

This is because midway through the animation queue, the stop() method is called on the element. Since the animate() method automatically sets the overflow to hidden (for animating height,) after the stop() method is called and we attempt to restore the element to it's original height, the animate() method sees that the overflow is currently set to "hidden" and therefore never properly removes the overflow value when the animation is done.

I've been able to fix this by tracking the original properties of the element and then clearing the settings once the queue is emptied.

See the following example of my patched code:

http://www.pengoworks.com/workshop/jquery/stop_bug_fix.htm

You'll notice that on this same example, the element's overflow is correctly reset once the queue clears.

A diff of my changes can be found here:

http://www.pengoworks.com/workshop/jquery/lib/jquery.anim.fix.txt

The main change I did was implement a variable to track the original properties of the element and this gets reset once the animation queue is empty.

Attachments (2)
  • bug-2408.html (1.4 KB) - added by Kanuck February 19, 2010 07:34AM UTC.

    Simple example of this bug in action.

  • jquery.anim.fix.txt (1.9 KB) - added by DanSwitzer2 February 25, 2008 05:26PM UTC.

    jQuery v1.2.3 Patch for stop() but

Change History (7)

Changed February 29, 2008 02:10PM UTC by DanSwitzer2 comment:1

After finally reading up about the $.data() method, I'd move the tracking of the original properties to use the $.data() method instead of a variable.

Changed February 19, 2010 07:37AM UTC by Kanuck comment:2

This bug is kicking my ass right now. I attached the simplest example I could think up.

Confirmed to still exist in jQuery 1.4.2.

In short, this:

$("#slidefade").hover(function() {
	$(this).find("div").stop().animate({
		'opacity' : 'toggle',
		'height' : 'toggle'
	}, 1000);
});

is not working as expected, because stop() is interfering with animate()'s ability to correctly remember the object's "on" state.

Changed November 17, 2010 05:06AM UTC by snover comment:3

milestone: 1.2.41.5
priority: majorhigh
status: newopen
version: 1.2.31.4.4

Changed March 30, 2011 08:05PM UTC by ajpiano comment:4

milestone: → 1.7
owner: → john
status: openassigned

Changed April 16, 2011 11:50PM UTC by john comment:5

resolution: → duplicate
status: assignedclosed

We're going to work on this over in: #8685.

Changed April 16, 2011 11:50PM UTC by john comment:6

Duplicate of #8685.

Changed September 27, 2011 03:57AM UTC by dmethvin comment:7

milestone: 1.7