jQuery wait for animation to proceed with PHP

Question

I have a problem with my jQuery animations.

I have a circular menu with two options. When I click on a option the the circle splits and both sides move appart from each other. But the problem is that it doesn't let the animation finish before refreshing the page with the new GET and POST vars.

Does anyone know a solution to let the two parts animate at the same time and let the animation complete before proceeding?

Menu:

https://i.stack.imgur.com/ZDn3X.jpg

Code:

  $("a").live("click", function(){
       $(".circle1").animate({ 
           marginLeft: "-=1000px"
       }, 1000)
       $(".circle2").animate({ 
           marginLeft: "+=1000px"
       }, 1000)
  });

...

echo "<div id = 'cirkels' class = 'cirkels'>
<a href='?media=fotos' class = 'circle1'><span>Foto</span></a>
<a href='?media=videos' class = 'circle2'><span>Video</span></a>
</div>";

Please remove the "php" tag from this question. Duplicate of http://stackoverflow.com/questions/1251300/how-to-run-two-jquery-animations-simultaneously — dmmd, Jun 21 '12 at 10:41
unqueueing them here is the solution: http://stackoverflow.com/questions/1251300/how-to-run-two-jquery-animations-simultaneously — Pablo Martinez, Jun 21 '12 at 10:44

Robbie · Answer 1 · 2012-06-22T00:08:07.130

The last parameter of "animate" is "complete". This is a function you can run when the animation is complete - i.e. exactly what you ask for. http://api.jquery.com/animate/

You can't exactly say "when both are finished" (unless you set a variable=0, on complete: variable=variable+1, if variable=2 then both completed - but that has small risk of failure) so trust that they'll both end after the second and set the 'complete" on only one of the animates. Or add a fractional gap (say 0.1 of a second) and run with that.

So one method:

$("a").live("click", function(){ 
   $(".circle1").animate({  
       marginLeft: "-=1000px" 
   }, 1000) 
   $(".circle2").animate({  
       marginLeft: "+=1000px"}, 1000, function() {
                 setTimeout(function() {alert('both done'); }, 100 );
});

And long winded method with fractional risk of failure:

$("a").live("click", function(){ 
   var comp = 0;
   $(".circle1").animate({  
       marginLeft: "-=1000px" 
   }, 1000, function() {comp++; if (comp==2) {  alert('both done'); } }) 
   $(".circle2").animate({  
       marginLeft: "+=1000px" 
   }, 1000, function() {comp++; if (comp==2) {  alert('both done'); } }) 
});

Edit

After comment below, I've added all the necessary bits, corrected the "timeout" function etc (the above were samples to give an idea of thining). Here are test scripts with tweaks including using "on" (not "live"), cancelling the click and adding the loader.

<html>
<head>
  <title>Test</title>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
  <script>
    $().ready( function() {
      $("a").live("click", function(){
         $(".circle1").animate({
             marginLeft: "-=1000px"
             }, 1000);
         $(".circle2").animate({
             marginLeft: "+=1000px"
             }, 1000, function() { setTimeout(function() {alert('both done'); }, 100 );
         });
         return false;
       });
   });
  </script>
</head>
<body>
      <div id="counter"></div>
  <a href="#">Click Me</a>
  <div class="circle1"></div>
  <div class="circle2"></div>
</body>
</html>

.

<html>
<head>
  <title>Test</title>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
  <script>
    $().ready( function() {
      $("a").on("click", function(){
       var comp = 0;
       $(".circle1").animate({
           marginLeft: "-=1000px"
       }, 1000, function() {comp++; if (comp==2) {  alert('both done'); } });
       $(".circle2").animate({
           marginLeft: "+=1000px"
       }, 1000, function() {comp++; if (comp==2) {  alert('both done'); } });
       return false;
    });
   });
  </script>
</head>
<body>
  <div id="counter"></div>
  <a href="#">Click Me</a>
  <div class="circle1"></div>
  <div class="circle2"></div>
</body>
</html>

.

I see what you do there but when I implement above code it still doesn't work. I think it is because the triggers the page to reload before the animation ends. I have tried it with a return false; statement which makes the animation complete but it also sets the same href every time. — SubChord, Jun 21 '12 at 14:03
Sorry - they were meant to give an idea of thinking. I've corrected them to be fully working code samples in the second part of the answer, (including removing the now deprectiated function "live"; put that back in if you're on an old version of jQuery) — Robbie, Jun 22 '12 at 00:09

jQuery wait for animation to proceed with PHP

1 Answers1