?
Solved

JQuery animate with two or more elements in the same function

Posted on 2013-01-18
3
Medium Priority
?
415 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

752 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