Solved

JQuery animate with two or more elements in the same function

Posted on 2013-01-18
3
408 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Browser Chrome downloads colored link 5 41
Call Controller Action Method from ASPX 2 16
Jquery 2 13
How to resize a div in html 3 11
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…

831 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