Update:
On a hunch, I had a thought that the display-style actually gets
changed when the animation is being performed. Turns out I was right.
My HTML originally looked like this:
<div id="product-list-categories">
<a href="#" class="category">This</a>
<a href="#" class="category">This</a>
<a href="#" class="category">This</a>
</div>
Updated to:
<div id="product-list-categories">
<a href="#" class="category">This</a>
<a href="#" class="category">This</a>
<a href="#" class="category">This</a>
<br style="clear: both;" />
</div>
The <a> tags are all floated left. All I did was add a <br /> tag
beneath them, and suddenly the background stays on during the
animation.
What this means is that the background is not at all disappearing, but
in fact the parent #product-list-categories DIV is somehow losing its
height property (based on the height of the floated contents.
Now I'm not sure if this is a jQuery UI bug or just part of everyday
HTML / CSS complexity. Either way I found a fix :)
Josh
On Aug 17, 12:37 pm, Joshua Langner <[email protected]> wrote:
> Here's my code:
>
> $('#categories-toggle').toggle(function() {
> $('#product-list-categories').hide("slide",
> {direction:"left"},
> 500);
> }, function() {
> $('#product-list-categories').show("slide",
> {direction:"left"},
> 500);
> });
>
> When #categories-toggle is clicked, #product-list-categories properly
> slides left. However, the background on #product-list-categories
> disappears during the animation. Whoopsie. Here's the CSS on #product-
> list-categories:
>
> #product-list-categories {
> display: block;
> position: absolute;
> left: 0px;
> top: 135px;
> width: 190px;
> background-color: #666;
>
>
>
> }
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
