jquery animation problem using stop

When running a Jquery animation like slideDown(), it looks like a number of element-specific css properties is set to be updated at a specific interval and when the animation is complete these properties are unset and the display property is simply set to auto or whatever. At least in firebug you can't see those temporary properties any more.

The problem I've encountered is the scenario where we stop the slide down with stop(). The element is then left with the current temporary css values. Which is fine because it has to, but let us say that I stoped the slidedown because I have decided to slide it back up again a bit prematurely. It would look something like this:

$(this).slideDown(2000)
//The below events is not in queue but will rather start execute almost 
simultaneously as the above line. (dont remember the exac开发者_如何转开发t syntax)
$(this).delay(1000).stop().slideUp(2000)

The above code might not make much sense, but the point is:

After 1 second of sliding down the animation is stopped and it starts to slide back up. Works like a charm.

BUT!!! And here is the problem. Once it it has slid back up the elements css properties are reset to the exact values it had 1000ms into the slideDown() animation (when stop() was called). If we now try to run the following:

$(this).slideDown(2000)

It will slide down to the very point the prior slideDown was aborted and not further at half the speed (since it uses the same time for approximately half the height). This is because the css properties were saved as I see it. But it is not especially wished for. Of course I want it to slide all the way down this time.

Due to UI interaction that is hard to predict everything might soon break. The longer animations we use increases the risk of something like this happening.

Is this to be considered a bug, or am I doing something wrong? Or maybe it's just a feature that is not supported?

I guess I can use a callback function to reset the css properties, but depending on the animation used, different css properties are used to render it, and covering your back would result in quite a not-so-fancy solution.

You could try to replace the slideUp and slideDown with animate.

http://api.jquery.com/animate/

This way, you are explicitly telling it what to do.

This is the expected (though not desirable) behavior...to get the .slideDown() to go to the full height, start the slides from the finished position, by using .stop(true, true), so the animation completes. The second true argument, telling it to skip to the end of the animation is the important part here, so those "final" values it slides back to are the full height, etc...rather than the height it was at when it stopped sliding.

This was a bug that has been fixed in jQuery 1.7.2: http://bugs.jquery.com/ticket/8685