Hello,
I am trying to learn how to use animation, and i have it working a little but I can't get it to move my box. I was wondering if someone might be able to let me know what I am doing wrong here.
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#right").click(function(){
$("#theDiv").animate({width: "500px"},1000);
});
$("#text").click(function(){
$("#theDiv").animate({fontSize: "24px"},1000);
});
$("#toggle").click(function(){
$("#theDiv").animate({left: "500"}, 1000, "swing");
});
});
</script>
<style type="text/css">
div#theDiv{
width:250px;
height:180px;
margin:10px;
padding:20px;
background:#3366CC;
border: 2px solid black;
cursor:pointer;
}
p,span{
font-size:16pt;
}
button{
margin:5px;
}
</style>
</head>
<body>
<p>Animating an Element</p>
<div id="theDiv">Anamate Me!
</div>
<button id="right">Grow Right</button>
<button id="text">Big Text</button>
<button id="toggle">Move Div</button>
</body>