Solved

jQuery: Animate height to auto

Posted on 2010-09-21
1
1,229 Views
Last Modified: 2012-05-10
Using jQuery, how can I animate the height to auto?

This does not work:
.animate({height: 'auto'}, 900);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>

<style type="text/css">
#leadForm1 {height: 0; overflow: hidden; width: 700px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<script type="text/javascript">
/* <![CDATA[ */

function CreateText($min,max)
{
 var l= l = ('Lorem ipsum ');
 var validchars = "eir mod tem por invidunt ut lab ore dol ore magna aliqu yam erat sed diam voluptu ";
  var minsize, maxsize, count, actualsize;
  minsize = Math.floor(Math.random()*100);
  maxsize = Math.floor(Math.random()*9000);
  if (maxsize<(Math.ceil(maxsize * 1.5)))
  var str = (Math.ceil(maxsize * 1.5));
  actualsize = Math.floor(Math.random() * (maxsize - minsize + 1)) + minsize;
    for (count = 1; count<actualsize; count++)
    l=l+validchars.charAt(Math.floor(Math.random()* validchars.length));
  return l;
}

$(document).ready(function(){

$('#rq1').click(function() {
  $('#leadForm1').html(CreateText());
  $('#leadForm1').animate({height: '650px'}, 900);
  $(this).css( {visibility: "hidden"})
  return false;
});

});

/* ]]> */ 
</script> 

</head>
<body>

<p><a href="#" id="rq1">Click Here</a></p>

<div id="leadForm1"></div>
<hr />
<h1>Hello World</h1>
</body>
</html>

Open in new window

0
Comment
Question by:hankknight
1 Comment
 
LVL 2

Accepted Solution

by:
amischol earned 500 total points
ID: 33730060
The animate jQuery extension works by pixels or relative size, but "auto" is not a pixel size.

First of all you must know what's the original height of the element.

window.originalHeight = $('#leadForm1').height();

$('#leadForm1').animate({height: '650px'}, 900);

$('#leadForm1').animate({height: window.originalHeight}, 900);
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question