Increasing and decreasing size of an element with the use of Javascript

Hello again!

Today, I have one little surprise for you ;)
This time I was working with Javascript and I found out that it is usefull to talk about transitions.
The transition effect is mostly related to something happening in a correct sequence, for example:
You can create a text field and if a user clicks a special button, the textfield expands. This is pretty simple to do using getElementById() function, however what if you need this text field to grow slowly, not just to pop up in a second?
This post is about the "div" area which is controlled by a button, click here to see the example.

The problem here is that we need to create a script that would be setting the different height of the "div" few times a second.
You can see the script I use below ( read the comments to understand it better):
The main thing what we do here is:

1. we create global variables menu_height, how_fast_expands, how_fast_shrinks and menu_expanded. With menu_expanded, we check if we have already set the "div" to expand or if we have set it to start to shrink.
2. we create 3 functions. First function which is evaluated when a user clicks a button ( which id="changer") is find_menu_state(). This function checks the menu_expanded variable and chooses which function to evaluate next. Next function evaluted (if menu_expanded = 0) is expand_menu(). This function first sets the button's value, then counts the menu_height variable, changes the menu_expanded state and starts to repeat a few times a second. The third function is evaluted when the "div" area is already expanding and if the user clicks a button once again. This function does the same as expand_menu(), just an opposite way.

And the surprise is put in the example of this post, here. Feel free to test it, works in all types of navigators ;)
cheers ;)