Using JavaScript to "animate" my webpage -

I thought I would write a simple script to animate my webpage a little bit.

The original idea was big for a div to break, when I pressed a button once and minimized its original size, when I push it again I handle the moving part well , But I can not do it again to shrink.

I am including a complete example, can you help me fix it?

  & lt ;! DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Stronger // N" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> & Lt; Html xmlns = "http://www.w3.org/1999/xhtml" & gt; & Lt; Top & gt; & Lt; Title & gt; Test & lt; / Title & gt; & Lt; Meta http-equiv = "content-language" content = "Estonian" /> & Lt; Meta http-equiv = "content-type" content = "text / html; charset = ISO-8859-15" /> & Lt; / Head & gt; & Lt; Body & gt; & Lt; Script type = "text / javascript" & gt; Var i; Var is increasing = new boolean ("true"); Var height; Function testFunction () {height = parseInt (document.getElementById ("testDiv") offset heit); If (increasing == true) {i = height + 4; Document.getElementById ("testDiv"). Style.height = i + "px"; If (height> = 304) {increase = false; } And {break (30); }} And {i = height - 4; Document.getElementById ("testDiv"). Style.height = i + "px"; If (height  

Use a standard jQuery library to do this, Do not do it in to make sure will not be a cross-browser.

With jQuery, you can work like this:

  $ ("# div-id"). Chetan ({"height": 300}, 1000);  

This will change the div height to 300 px in 1000 ms = 1 second.