Solved

JQuery animate with two or more elements in the same function

Posted on 2013-01-18
3
405 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
Comment Utility
<!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
Comment Utility
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
Comment Utility
<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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

763 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

7 Experts available now in Live!

Get 1:1 Help Now