Solved

Jquery multiple animations

Posted on 2013-01-17
2
410 Views
Last Modified: 2013-01-17
I have some basic knowledge in jQuery, I do some stuff, and I construct a basic animation and I want develop more.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title>
<script src="../../ficheiros_apoio/jquery.min.js"></script>
<style type="text/css">
#geral{position: absolute; width: 600px; height: 600px;}
#piece{position: absolute; width: 13px; height: 20px; left: 20px; top: 150px;}
</style>
</head> 
<body> 
<div id="geral">
<div id="piece"><img src="ponteiro_rato.png" alt="Rato" width="13" height="20" /></div>
</div>
<script>
$('#piece').animate({
left: '500',
top: '500',
}, 2500, function() {
alert("working");
});
</script>
</body> 
</html>

Open in new window

The code in snippet code shows a basic animation that just moves the "div piece" to other place. And I opened this question because I want do two things more in my animation:
After complete my initial move, I need in animation pause 5 seconds, and after the pause, the "div piece" moves to this coordinates "left: 150px and top: 100px".
Can you show me how I do that?

The best regards, JC
0
Comment
Question by:Pedro Chagas
2 Comments
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 260 total points
ID: 38789301
$('#piece').animate({
	left: '500px',
	top: '500px',
}, 2500, function() {
	var t = setTimeout( function() {
		$('#piece').animate({
			left: '150px',
			top: '100px'
		});
	},5000)
});

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 240 total points
ID: 38789389
another one : http://jsfiddle.net/kGrQ3/
$('#piece').animate({ left: '500', top: '500', }, 2500).delay(5000).animate({ left: '150', top: '100', }, 2500);

Open in new window

0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

911 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

24 Experts available now in Live!

Get 1:1 Help Now