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

Reported by:	john	Owned by:
Priority:	major	Milestone:	1.1.3
Component:	effects	Version:	1.1.2
Keywords:		Cc:
Blocked by:		Blocking:

Description

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.

Attachments (0)

Change History (5)

Changed January 14, 2007 04:39PM UTC by joern comment:1

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); })

Changed January 16, 2007 05:20PM UTC by brandon comment:2

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.

Changed January 23, 2007 05:37PM UTC by joern comment:3

resolution:	→ worksforme
status:	new → closed

Like Brandon said.

Changed January 25, 2007 03:27AM UTC by john comment:4

resolution:	worksforme
status:	closed → reopened

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.

Changed March 15, 2007 05:17PM UTC by john comment:5

milestone:	→ 1.1.3
resolution:	→ fixed
status:	reopened → closed
version:	→ 1.1.2

This should be fixed in SVN rev [1531].

Side navigation

#799 closed bug (fixed)