Solved

iQuery animation slide not working

Posted on 2013-01-25
3
292 Views
Last Modified: 2013-01-26
I have 3 buttons each performing simple animations. The last button ( <button id="moveDiv" >Move Div</button>) is not working.

Question: How can I fix the code so that upon click on "Move Div" button, the div will swing to the right?

Thank you,

Mike
===========


<!DOCTYPE html>
  <html>
    <head>

	<title>iQuery CSS sizing and positioning</title>
	<script type="text/javascript" src="jQuery/jquery-1.3.2.js"></script>
	<script type="text/javascript">
		//$("document").ready(function() {
		  	$(function() {
				$("#growRight").click(function() {
					$("#theDiv").animate({width: "500px"},1000);
				});
				$("#bigText").click(function() {
					$("#theDiv").animate({fontSize: "24pt"}, 1000);
				});
				$("#moveDiv").click(function() {
					$("#theDiv").animate({ left: "500" }, 1000, "swing");
				});
			});
		//});
	</script>
	<style type="text/css">
		div#theDiv { 
			height: 180px;
			width: 250px;
			margin: 10px;
			padding: 20px;
			background: Lightblue;
			border: 2px solid black;
			offset: 250px;
			cursor: pointer;
		}
		p, span {
			font-size: 18pt;
		}
		button {margin: 2px;}
	</style>
	</head>
	<body>
	  <p>Fading an Element</p>
	  <div id="theDiv">Animate Me</div>
	  <button id="growRight" >Grow Right</button>
	  <button id="bigText" >Big Text</button>
	  <button id="moveDiv" >Move Div</button>
	</body>
</html>

Open in new window

0
Comment
Question by:Mike Eghtebas
  • 2
3 Comments
 
LVL 16

Accepted Solution

by:
kiranvj earned 500 total points
ID: 38821649
Try

left: "500px"

instead of left: "500"

also #moveDiv should be positioned relative or absolute for property left to work.


just try CSS

#moveDiv {
 position:relative;
}
0
 
LVL 33

Author Comment

by:Mike Eghtebas
ID: 38821896
#theDiv{
 position:relative;
}

works.

Thank you.
0
 
LVL 16

Expert Comment

by:kiranvj
ID: 38821991
Good to know it helped. Thanks for the points and grade.

kiranvj
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Javascript in a user control not working 17 52
What does this javascript do? 7 24
Asp.net mvc 5 5 19
Different Delete Messages 7 17
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now