[SOLVED] help with toggle and animation
I made a very simple page, see below.
A div should grow on click, and then click again it shrinks back down again.
I got it to work as a one-way animation, but then when I try to plug it into a toggle function, it doesn't do anything. I feel like I've got a missing semicolon or something too obvious
Help please!
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("go").toggle(
function () {
$("#boxcontainer").animate({
width:"616px",
height:"379px",
left: "50px",
top: "200px",
}, 600 );
},
function () {
$("#boxcontainer").animate({
width:"100px",
height:"150px",
left: "300px",
top: "300px",
borderWidth: "1px"
}, 1200 );
},
);
});
</script>
<style>
#boxcontainer {
width:100px; height: 150px; left: 300px; top: 300px;position:absolute;
border:1px solid green; overflow:visible;
}
</style>
</head>
<body>
<div id="boxcontainer"> <div id="go">
<div ><img width="100%" height="100%" src="../../../images/ideal.jpg"/></div></div></div>
</body>
</html>