Setting a CSS height/width then animating a div breaks it

[john]

For example:

$("<div></div>")
  .height(300)
  .width(300)
  .css("background","black")
  .appendTo("body");

then do:

$("div").hide("fast")

That works fine, but then try:

$("div").show("fast")

and it completely breaks, it loses all of the styling that was previously set on it.

[joern]

Animations would have to store existing inline styles and restore them afterwards.

I guess a valid workaround is to move the styles to a stylesheet and add a class accordingly. Or reapply the modified styles after the animation is completed:

var styles = {
 height: 300,
 width: 300,
 background: "black"
}
$("<div></div>")
  .css(styles)
  .appendTo("body");
$("div").show("fast", function() { $(this).css(styles); })

[brandon]

Again, inline styles are a bad practice and break the flexibility of different media style sheets (like print). Since the width/height is known in this case the other animate methods could be used just as easily. The show and hide remove all the inline styles it can but the other animate methods do not.

[joern]

Like Brandon said.

[john]

I think you guys are missing something - it's completely impossible to hide, then show, any element that has a specific style set. This happens everywhere. Every single DHTML application - case in point: Resizable Windows. Claiming that something "doesn't work in a print stylesheet" is a really strange argument, considering that we're talking about animations here; something that isn't even relevant to print styles or unobtrusive scripting.

The fix is dead simple: whenever a hide is done just revert back to all original inline styles, while setting display to none - it works perfectly. I know that fx use to work that way, but it must've been reverted at some point.

[john]

This should be fixed in SVN rev [1531].