Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I Animate an Element to its natural height using jQuery [duplicate]

I'm trying to get an element to animate to its "natural" height - i.e. the height it would be if it had height: auto;.

I've come up with this:

var currentHeight = $this.height();
$this.css('height', 'auto');
var height = $this.height();
$this.css('height', currentHeight + 'px');

$this.animate({'height': height});

Is there a better way to do this? It feels like a bit of a hack.

Edit: Here's a complete script to play with for anyone that wants to test.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
    <head>
        <title>jQuery</title>
        <style type="text/css">
            p { overflow: hidden; background-color: red; border: 1px solid black; }
            .closed { height: 1px; }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
        <script type="text/javascript">
        $().ready(function()
        {
            $('div').click(function()
            {
                $('p').each(function()
                {
                    var $this = $(this);

                    if ($this.hasClass('closed'))
                    {
                        var currentHeight = $this.height();
                        $this.css('height', 'auto');
                        var height = $this.height();
                        $this.css('height', currentHeight + 'px');

                        $this.animate({'height': height});
                    }
                    else
                    {
                        $this.animate({'height': 1});
                    }

                    $this.toggleClass('closed');
                });
            });
        });
        </script>
    </head>

    <body>

        <div>Click Me</div>
        <p>Hello - I started open</p>
        <p class="closed">Hello - I started closed</p>

    </body>
</html>
like image 719
Greg Avatar asked Sep 02 '09 19:09

Greg


People also ask

Which jQuery method can be used to gradually change the height of the selected element?

jQuery height() Method The height() method sets or returns the height of the selected elements.

Which jQuery function is used to add animation to an element?

The jQuery animate() method is used to create custom animations. Syntax: $(selector).

How would you create an animation using jQuery where the element of ID Facebook changes its height to 300px slowly?

click(function() { $( "#box" ). animate({ width: "300px", height: "300px", }, 1500 ); }); $( "#btn2" ). click(function() { $( "#box" ). animate({ width: "100px", height: "100px", }, 1500 ); });


2 Answers

I permit myself to answer this thread, even if it's been answered a long time ago, cuz it just helped me.

In fact, i don't understand the first answer : why opening a half-closed element to get its height, and then closing it again ?

At the beginning, you hide the element so that just a part of it appears, right ? The best way (i believe) to do this is onready, with javascript. So, when you hide the element onready, just save the orig height in a var, so you don't have to hide(onready)-show-save height-hide to be able to toggle the elements visibility.

Look at what i did, it works perfectly :

$(document).ready(function(){
var origHeight = $("#foo").css('height');
$("#foo").css({"height" : "80px"});
$("#foo .toggle").bind("click", function(event){ toggleFoo(event, lastSearchesMidHeight); });
});

Here, when you call your toggle function, you know what is your original element height without wanking around.

I wrote it fast, hoping it could help someone in the future.

like image 107
aaaaaa Avatar answered Sep 20 '22 10:09

aaaaaa


the easiest solution I found was to simply wrap the content element with a div that is limited in height and set to overflow:hidden. This truncates the inner content element to the height of the wrapping div. when the user clicks, hovers, etc. to show the full height of the content element - simply animate the wrapping div to the height of the inner content div.

like image 40
Tobias Avatar answered Sep 18 '22 10:09

Tobias