Member Avatar for AMADH

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>
  • 2 Contributors
  • 2 Replies
  • 229 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by AMADH
Member Avatar for @developer

Use

position:absolute;

in your style.

Edited by @developer because: n/a
Member Avatar for AMADH

Thanks a bunch,
this works great now.

Aaron

Use

position:absolute;

in your style.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.