Bug Tracker

Opened 14 years ago

Closed 13 years ago

#799 closed bug (fixed)

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.

Change History (5)

comment:1 Changed 14 years ago by 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); })

comment:2 Changed 14 years ago by 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.

comment:3 Changed 14 years ago by joern

Resolution: worksforme
Status: newclosed

Like Brandon said.

comment:4 Changed 14 years ago by john

Resolution: worksforme
Status: closedreopened

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.

comment:5 Changed 13 years ago by john

Milestone: 1.1.3
Resolution: fixed
Status: reopenedclosed
Version: 1.1.2

This should be fixed in SVN rev [1531].

Note: See TracTickets for help on using tickets.