Solved

JQuery animate with two or more elements in the same function

Posted on 2013-01-18
3
406 Views
Last Modified: 2013-01-18
Hi E's, I want do a animation with 2 or more elements in jQuery at the same function.
<!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;}

/* the new element (for show after the first stage):
#square{position: absolute; width: 20px; height: 20px; background-color: red; visibility: hidden;}
*/
</style>
</head> 
<body> 
<div id="geral">
<div id="piece"><img src="ponteiro_rato.png" alt="Rato" width="13" height="20" /></div>
</div>
<script>
demo();
function demo(){
$('#piece').animate({ left: '500', top: '500', }, 2500).delay(5000).animate({ left: '150', top: '100', }, 2500);
}
</script>
</body> 
</html>

Open in new window

The code in a snippet code shows my code to a animation with one element, the element #piece. In line 12 I added a new line of code, a new element #square, and this one will be part of the animation too. Where?
In first stage, the element #piece goes to other place (w500 h500). The second stage, the element #piece make a pause (delay) of 5 seconds. The third stage, the element #piece goes to other place (w150 h100).
I want put the element #square in the beginning of the second stage, and make visible the same 5 seconds of the element #piece. After that 5 seconds, the #square element disappears with the function .hide.
Can you tell me how I can do this?

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

Expert Comment

by:Tom Beck
ID: 38793718
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/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;}

/* the new element (for show after the first stage):*/
#square{position: absolute; width: 20px; height: 20px; background-color: red; display:none}
</style>
</head> 
<body> 
<div id="geral">
<div id="piece"><img src="ponteiro_rato.png" alt="Rato" width="13" height="20" /></div>
<div id="square"><img src="ponteiro_rato.png" alt="Square" width="13" height="20" /></div>
</div>
<script>
demo();
function demo(){
$('#piece').animate({ left: '500', top: '500', }, 2500, function(){
	$('#square').show();
}).delay(5000).animate({ left: '150', top: '100', }, 2500, function(){
	$('#square').hide();
});
}
</script>
</body> 
</html>
</body> 
</html>

Open in new window

Explanation: JQuery .animate provides for a callback function which will execute when the animation completes. You can use the callback function to display the square element and hide it again after the second animation is complete.
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 38793796
Hi, thanks for the quick answer.
In your solution, the element #square is visible longer than expected, let us see:
1 - #piece goes to other location.
2 - #piece pause 5 seconds && #square visivel for the same 5 seconds (the pause of #piece occours in simultaneo of #square visible), and #square will hide after that 5 seconds too.
3 - when the third part begins the element #square is now hidden again.

Can you change the code please-

~JC
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 38793880
<script>
demo();
function demo(){
$('#piece').animate({ left: '500', top: '500' }, 2500, function(){
      $('#square').show();
      var t = setTimeout(function(){
            $('#square').hide();
            $('#piece').animate({ left: '150', top: '100' }, 2500);
      },5000);
});
}
</script>
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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
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 custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

914 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

13 Experts available now in Live!

Get 1:1 Help Now