Animate Element to Auto Height With Jquery

jQuery - Animating height to auto

After over an hour trying to find a fix here it is:

• I duplicated the .portfolio and everything inside it, I set it's opacity to 0 and z-index to -1000 so no elements in side where hoverable/selectable which would trigger a jQuery hover effect.

Finally to fix me getting a horrible height mistake (as the images hadn't rendered when I loaded the page, giving me a false answer of 40%~ correct value I changed

$(document).ready(

to

$(window).load(

Now It's responsive =D

How to set 'auto' height in JQuery animate

Have you tried slideDown and slideUp ? :

$(document).ready(function(){
    $("#open").click(function(){
        $("#textselector-body").slideDown(2000);
    });
    $("#close").click(function(){
        $("#textselector-body").slideUp(2000);
    });
});​

jsFiddle: http://jsfiddle.net/7m5Qa/2/

jQuery Animate to Auto Height and back

Quick and dirty, but you can store the original height in a variable and reference it.

var $body = $('body');
var original_height = $('#language').height();
function languagesListDropdown() {
    $body.on('click', '#language li a.chosen', function (e) {
        var $languagesList = $('#language');
        var curHeight = $languagesList.height();
        if (!$languagesList.hasClass('opened')) {
            $languagesList.css('height', 'auto');
            var autoHeight = $languagesList.height();
            $languagesList.height(curHeight).animate({height: autoHeight}, 300, function(){
                $(this).addClass('opened');
            });
        } else {
            $languagesList.height(curHeight).animate({height: original_height}, 300, function(){
                $(this).removeClass('opened');
            });
        }


        return false;
    });
}

languagesListDropdown();

JQuery/CSS3: Animating auto height change

I think I have found a workaround that works relatively nice. For it to work the following requirement has to be satisfied: child element is in the DOM (either loaded with document or dynamically) but hidden.

First I need to calculate the height of the parent as it is in its final state, i.e. with the child already shown. I first came to this method to calculate the height of the hidden child, but this method has a fundamental flaw: if your child's width in some cases is greater than your parent, the contents in the child will be wrapped when it is placed inside the parent. This method will not calculate the height accurately in that case because an absolutely positioned element has no regard to its parent's width.

Thus the only way to accurately calculate the height is to actually place the child inside its parent. Below is the trick:

$(".content").fadeIn(800);
var contentHeight = $(".content").outerHeight(true);
$(".parent").animate({"height", contentHeight}, 200);

I first call fadeIn on the child to put it in the flow of the DOM, and immediately after that grab the height of the child and whatever other things to calculate the proper height the parent should be, and animate the parent's height in a shorter animation span, say .animate({height: myHeight}, 200).

The result is a smoothly animated container with dynamic height depending on its child contents.

Here is the fiddle, as you can see there is no fixed height being set anywhere on the page other than the initial height of the parent container. This fiddle uses CSS3 animations and jQuery, but they are interchangeable in most cases. Notice that you still need the .outerHeight(true) to get the total size of the content including its margins, and setting overflow: hidden on the parent avoids content overflow during animation in some situations.

jQuery animate height to auto

You can do it with scrollHeight.

$('ul').hover(function(){
  $(this).animate({
    height: $(this)[0].scrollHeight+'px'
  }, 400);
}, function(){
  $(this).animate({
    height: '125px'
  }, 400);
});

How to animate element's height after html() function using jQuery?

To use .animate() to change the height of an element, you must set a value of Pixels.

Example:

$(function() {
  $("#clickme").click(function() {
    $("#book").animate({
      opacity: 1,
      height: 123
    }, 1000, function() {
      // Animation complete.
    });
  });
});

#book {
  width: 20px;
  height: 30px;
  border: 1px solid black;
  background-color: #CCC;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<div id="book"></div>

$this.hasClass('closed') ? $(this).slideDown() : $(this).slideUp() ;

<div style='border-top:1px solid #333333'>
  <div class='toggleMe'>Hello World</div>
</div>

$(function() {  var el = $('#ev-donate-form'),    curHeight = el.height(),    autoHeight = el.css('height', 'auto').height();  el.height(curHeight);  $("#ev-sponsors").click(function() {    if (el.height() == 0) {      el.animate({        height: autoHeight      }, 600, function() {        el.css('height', 'auto');      });    }    else {      el.animate({        height: curHeight      }, 600);    }  });});

#ev-sponsors {  border: 1px solid;  padding: 1em;  text-align: center;  cursor: pointer;}
#ev-donate-form {  height: 0;  overflow: hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="ev-sponsors">  CLICK ME</div><div id="ev-donate-form">  <p><strong>  Set the height of this div to 'auto' after the animation that opened it.  </strong></p>  <textarea rows="4" cols="50">    Resize this text area to change the height.  </textarea></div>