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
Solved

JQuery animate with two or more elements in the same function

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

The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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…

791 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