Imagine an animated sliding box displaying a daily news feed. When the page loads, the box displays an excerpt of news then expands to display the full content. Now make sure the article is selected at random so we never know it's full length.

Sounds like fun already.

The unknown variable for height in this scenario can cause a few headaches using the .animate() method. You could create a separate jQuery call for each news article on your site or completely give up and alter the code each time the article changes. But wouldn't it be nice if it was automated? This tutorial describes a method to force the code to do our dirty work by gathering the height variable for us.

The jQuery Code

Insert the following into the header of your website between the opening head and closing /head tags:

<script type="text/javascript">
<!--
var sliderHeight = "0";
var initialDelay = 200;
var slideDuration = 2400;

$(document).ready(function(){
	$(‘#content').show();
	$(‘#content').each(function () {
		var current = $(this);
		current.attr("box_h", current.height());
	});
	$("#content").css("height", sliderHeight);

var delay = function() { sliderOpen(); };
setTimeout(delay, initialDelay);
});

function sliderOpen()
{
	var open_height = $("#content").attr("box_h") + "px";
	$("#content").animate({"height": open_height, paddingBottom: "20px"}, {duration: slideDuration });
}
//-->
</script>

Starting Height:

Line: 03 sliderHeight (pixels) An initial height determined in pixels. In our example, we have chosen to start the height at zero pixels.

Delay:

Line: 04 initialDelay (milliseconds) An integer indicating the number of milliseconds to delay execution of the next item in the queue. In our example, we have a 200 millisecond delay before the slider animates.

Duration:

Line:05 slideDuration (milliseconds) A string or number determining how long the animation will run in milliseconds. Feel free to alter this number and experiment with different time lengths.

Target:

#content Our CSS target div. This can be a class as well, for example: ‘.mySlidingContent'. Please be sure to replace all instances of #content with the target selector you have chosen.

Custom CSS:

Line: 22 paddingBottom In our example we have added additional padding which will integrate into the animate. Note: Remember not to include any dashes in your CSS here, for example: (margin-bottom) would become (marginBottom) with a capital "B" replacing the dash.

The CSS

#content{
 width: 795px;
 margin: 10px 0 50px 40px;
 padding-left: 20px;
 padding-right: 5px;
 padding-top: 80px;
 padding-bottom: 30px;
 }

Notice the padding-bottom is set to ‘30px' which will reduce to ‘20px' during the animation.

The Page Code

<div id="content">
 <h2>My Title</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>