Question

I have the following code, the animation doesnt appear to be working when I want to change the div tag height to 100%. However if I set it to pixels the animation then works.

Any help would be appreciated.

HTML / CSS

    <br />
<div id="biotext" style="width: 400px; height:50px; border: 1px solid #FF0000; background-color: #FF0000; overflow:hidden;">
    Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024 Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024 Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024 Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024
</div>


    <p><a href="#" id="seemoreb">Click</a></p>

Javascript

$(document).ready(function() {
    $("#seemoreb").click(function() {
        $("#biotext").animate({
            height: '100%'
        }, 1000);
    });

});​

http://jsfiddle.net/4MTyW/

Answer 1

This is a “bug” per se in jQuery. Not really a bug, but functionality that isn’t there that people may be expecting. The reason why this doesn’t work is because you’re starting with a fixed height and trying to translate that height into a percentage, which CSS can’t really do. If you tried to do this with regular CSS transitions, it wouldn’t work either. I don’t know why, but that’s just how it is.

However, there is a workaround. You can manually calculate the height of the container you’re trying you expand to and then drop that number in your animation. It’s not too terribly difficult:

var containerHeight = $('.mycontainer').height();
$("#seemoreb").click(function() {
    $("#biotext").animate({
        height: containerHeight
    }, 1000);
});

Of course depending on your application, it may be more complicated than that, but that’s at least why it doesn’t work and how you can get around it.

Ok I see you don’t have a container in your demo. In that case, rather than using animate, why not just use .slideDown()?