jQuery DIV height issues.

Question

Good day :)

I am using jQuery's animate() on both opacity and height, on a fixed-size div.
It all works fine and dandy in firefox, but in IE8 (with and without compatibility-mode, so I am assuming it will have the same behavior in IE6 and IE7), the animation does show, but when the div height reaches 0%, the div's height adjusts to the height of the text inside of that div.
The first thing I immediately did was set overflow to hidden, but it still gives the same behavior.

I'm using the following function to slowly toggle height/opacity:

function OpacityFadeToggle(e_trigger, e_element, speed)
{
    $(e_trigger).toggle(
     function() {
      $(e_element).animate({ 
       opacity:  0.0,
       height:  "0px"
      }, speed);
     },
     function() {
      $(e_element).animate({
       opacity:  1.0,
       height:  "500px"
      }, speed);
     }
    );
}

$(function() {
    OpacityFadeToggle("a#a2", "div#b1", 1000);
});

Style for my "b1" div is the following:

div#b1 {
    color:  #ffffff;
    background-color: #000000;
    overflow:  hidden;
    width:  600px;
    height:  500px;
    padding:  0px;
    margin:  0px;
    display:  block;
}

If you'd rather want to see a live example, I've temporarily set up a page over here: click me!

Any help on this matter is much appreciated.

Answer 1

You can try adding a callback to jQuery's animate call, and inside the callback hide the div by changing it's display property.

Answer 2

What about animating it to 1px, then hiding the div after the animation is done? Also, make sure to show the div again before animating from 1px to 500px.

function OpacityFadeToggle(e_trigger, e_element, speed)
{
    $(e_trigger).toggle(
        function() {
                $(e_element).animate({ 
                        opacity:        0.0,
                        height:         "1px"
                }, speed).hide();
        },
        function() {
                $(e_element).show().animate({
                        opacity:        1.0,
                        height:         "500px"
                }, speed);
        }
    );
}