Simulate height: auto when using animate ()

The task of using various animated objects on the site, such as a menu or a photo gallery, has long been a rarity. And here developers come to the aid of the wonderful jquery method animate (). This method allows you to animate various css properties, but it has one rather significant drawback - only numbers can be used as property values, or hide, show and toggle values. For example, height: 20 is correct, but height: auto will not always and everywhere work.

Let's try to solve this problem with a specific example.

Let's say you need to develop a vertical two-level menu. By default, only the first level items are open, and when you click on the corresponding link, the open sublevel is hidden first, and then the hidden one opens. But not just open, but animated with an increase in the height and transparency of the container.

That is, in the end, you need to get this menu:
')


We write the HTML code of our future menu:

<a id= "1" class= "menu" > 1 </a><br/>
<div id= "magic1" class= "magic" > 2 </div>
<a id= "2" class= "menu" > 1 </a><br/>
<div id= "magic2" class= "magic" > 2<br/> 2<br/> 2 </div>
<a id= "3" class= "menu" > 1 </a><br/>
<div id= "magic3" class= "magic" > 2 </div>


Css:

div.magic{
filter : alpha(opacity=0) ;
-moz-opacity : 0 ;
-khtml-opacity : 0 ;
opacity : 0 ;
overflow : hidden ;
padding-left : 10px ;
}


And javascript:

$(document).ready(function(){
$( "a.menu" ).click(
function(){
$( "div.magic" ).animate({
opacity: 0,
height: "10px"
}, 500);

$( "div#magic" + this .id).animate({
opacity: 1,
height: "auto"
}, 500);
}
);
})


When you click on a menu item, we hide all the blocks of the “magic” class, and reveal the one that contains the sub-items we need.

It would seem that everything should work, but this is not at all the case. Instead of the value of the height property “auto”, Firefox, Google Chrome and Opera set the height of the container to 10px, which we wrote in css, and IE7 gives an error: an invalid argument.

How to deal with this?

Method 1.

The idea is to preliminarily, before starting work with the menu, write to the array the height values ​​of all the necessary containers, and then replace the value of the element of this array instead of “auto”. That is, the new javascript code will look like this.

$(document).ready(function(){
var height_element= new Array();
var array_length=$( "div.magic" ).length;

for (i=1;i<=array_length;i++)
{
height_element[i]=$( "div#magic" +i).height();
}

$( "a.menu" ).click(
function(){
$( "div.magic" ).animate({
opacity: 0,
height: "10px"
}, 500);

$( "div#magic" + this .id).animate({
opacity: 1,
height: height_element[ this .id]+ 'px'
}, 500);
}
);
})


Thus, we will get rid of using a settable height value equal to “auto” and replace it with a specific numeric value. This will help us to get rid of the error in IE, but, as it turned out, it will not solve the problem with the true value of the container height, because all browsers will continue to set the new value to 10px. That is, on the screen we will see this:



In order to cope with this problem, we remove the height value from the properties of the “magic” class, and we will set it dynamically after writing the true value of the height into the array.

The new css-file will look like this:

div.magic{
filter : alpha(opacity=0) ;
-moz-opacity : 0 ;
-khtml-opacity : 0 ;
opacity : 0 ;
padding-left : 10px ;
overflow : hidden ;
}


And javascript like this:

$(document).ready(function(){
var height_element= new Array();
var array_length=$( "div.magic" ).length;

for (i=1;i<=array_length;i++)
{
height_element[i]=$( "div#magic" +i).height();
}

$( "div.magic" ).css( "height" , "10px" );

$( "a.menu" ).click(
function(){
$( "div.magic" ).animate({
opacity: 0,
height: "10px"
}, 500);

$( "div#magic" + this .id).animate({
opacity: 1,
height: height_element[ this .id]+”px”
}, 500);
}
);
})


Well, for complete happiness, you can add a certain variable "first", which will be equal to 0 after the page loads, and will take the value 1 after the first click on the menu item. It is necessary in order to get rid of the delay of 500 milliseconds to hide the open sub-level of the menu when all the sub-levels are hidden.

A working example can be found here.

Method 2

Instead of the animate () method, use the hide () and show () methods with a duration of the same 500 milliseconds.

However, when using the hide () and show () methods, all styles of an object smoothly change, that is, the padding we need will also change from 0 to 10 and back. The effect is, of course, beautiful, but in this case not necessary. Therefore, padding will need to be taken out in a separate container.

HTML code for this case:

<a id= "1" class = "menu" > 1</a><br/>
<div id= "magic1" class = "magic" ><div class = "inner" > 2</div></div>
<a id= "2" class = "menu" > 1</a><br/>
<div id= "magic2" class = "magic" ><div class = "inner" > 2<br/> 2<br/> 2</div></div>
<a id= "3" class = "menu" > 1</a><br/>
<div id= "magic3" class = "magic" ><div class = "inner" > 2</div></div>

CSS:

div.magic{
overflow:hidden;
display:none;
}

a.menu{
cursor:pointer;
color:#0033CC;
text-decoration:underline;
margin-bottom:10px;
}

div.inner{
padding-left:10px;
}



And javascript:

$(document).ready(function(){
var first=0;
var last_id=0;
var id_now=0;

$( "a.menu" ).click(
function(){
id_now= this .id;

if (first!=0)
{
$( "div#magic" + last_id).hide(500,function(){
$( "div#magic" + id_now).show(500);
});
}
else
{
first=1;
$( "div#magic" + this .id).show(500);
}

last_id=id_now;
}
);
})

* This source code was highlighted with Source Code Highlighter .

Thanks to the user Voenniy for finalizing the second method.

A working example can be found here.

And as a final word . This post was not written in order to create a menu on jQuery, because there are a lot of such menus. The main goal here is to show how you can simulate the value of the height: auto property in two ways when using the animate () method. But such a task can occur not only when creating a menu.