Bug Tracker

Opened 14 years ago

Closed 14 years ago

Last modified 13 years ago

#276 closed bug (fixed)

animate() sets absolute dimensions when using "show" and "hide" targets

Reported by: ieure Owned by: brandon
Priority: undecided Milestone:
Component: effects Version:
Keywords: Cc:
Blocked by: Blocking:

Description

When you use animate() to change the height or width of an element to "show" or "hide," the dimensions are specified in pixels when the animation is complete.

This is a problem when you have nested elements which slide down, since the containing box doesn't change size when the child is revealed.

I seem to recall that the height / width when animating were set to "auto" at the end. That's the correct behavior in this case. I don't know if that was removed for a reason or if it's a regression.

Change History (11)

comment:1 Changed 14 years ago by brandon

The code for setting the height and width auto at the end is still in place. Could you provide an example where it doesn't work or a version/revision number where it stopped working?

comment:2 Changed 14 years ago by ieure

Still happens with 1.0.2. Testcase:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Testing</title>
        <meta http-equiv="Content-type" "text/html; charset=utf-8">
    </head>
    <body>
        <div id="target">GIGA·KNIGHT®!</div>
        <div onclick="$('#target').animate({height: 'hide', opacity: 'hide'});">Hide</div>
        <div onclick="$('#target').animate({height: 'show', opacity: 'show'});">Show</div>
        <script type="text/javascript" src="jquery-1.0.2.js"></script>
    </body>
</html>

Click show, or hide, then show. Open up Firefox's DOM Inspector and look at #target. “style” shows: overflow: hidden, display: block, height: 16px, opacity: 0.9999;

Perhaps the final loop iteration isn't running?

comment:3 Changed 14 years ago by juha.suni@…

Ran into the same issue when using the treeView plugin, using slideDown and slideUp. This worked flawless with an older version of jQuery, but with the new version I had to use the callback to manually set the height to auto after the animation had finished.

comment:4 Changed 14 years ago by evoluenta@…

I am able to reproduce similar behavior on nearly every form in Drupal by using jQuery's show() function (only with a parameter, such as "slow" or "fast").

I can fix the issue by removing the absolute pixel height added by show(), using Firefox DOM Inspector.

Bug and steps to reproduce (tested in Drupal only): http://drupal.org/node/93955

comment:5 Changed 14 years ago by joern

Priority: majorcritical
Version: 1.0

comment:6 Changed 14 years ago by brandon

Owner: changed from john to brandon

comment:7 Changed 14 years ago by brandon

Resolution: fixed
Status: newclosed

This is now fixed in SVN REV: 576.

As a result of this fix the private method jQuery.setAuto is deprecated.

After a show is complete the only thing that should be inline is the opacity in Firefox.

After a hide is complete the only thing that should be inline is the display: none.

All other properties are reset back to the controlling stylesheet or browser defaults.

comment:8 Changed 14 years ago by evoluenta@…

Thank you, brandon!!!

comment:9 Changed 14 years ago by joern

Priority: criticalblocker
Resolution: fixed
Status: closedreopened

This still isn't working right. I suspect that this issue is related, as it works with some older revisions. Demo: http://fuzz.bassistance.de/sandbox/sandbox.html

comment:10 Changed 14 years ago by brandon

Resolution: fixed
Status: reopenedclosed

This is actually the way it is supposed to work. The stylesheet should dictate how the styles should be and your styles say that element should be hidden. If you want to hide an element it should be done in document.ready. The previous way the fx lib was working was to be extremely obtrusive by leaving styles behind (including display: block). This breaks items that aren't supposed to be display block after the effect is over ... like table-row, inline, etc.

comment:11 Changed 14 years ago by brandon

So as to not break existing code built on the existing 1.0.4 branch and to be more consistent with the existing regular show and hide methods the display property will remain inline but will be restored to original value after the animation is completed.

Note: See TracTickets for help on using tickets.