Question

我的jQuery动画有问题。

我有一个带有两个选项的圆形菜单。当我点击一个选项时，圆圈会分开并且两边都会相互移动。但问题是它在使用新的GET和POST变量刷新页面之前不会让动画完成。

有没有人知道让这两个部分同时动画并让动画完成才能继续进行的解决方案？

菜单：

代码：

  $("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>";

Answer 1

“animate”的最后一个参数是“complete”。这是一个你可以在动画完成时运行的功能 - 也就是你要求的功能。 http://api.jquery.com/animate/

你不能确切地说“两者都完成了”（除非你设置变量= 0，完成：变量=变量+ 1，如果变量= 2则完成 - 但是失败的风险很小）所以相信它们都会在第二个之后结束，并且只在其中一个动画上设置'完成'。或者添加一个小数间隙（比如0.1秒）并运行它。

所以一种方法：

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

具有分数风险失败的冗长方法：

$("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'); } }) 
});

修改

在下面的评论之后，我已经添加了所有必要的位，更正了“超时”功能等（以上是样本以便了解这些内容）。以下是调试脚本，包括使用“on”（非“live”），取消点击并添加加载程序。

<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>

jQuery等待动画继续PHP

1 个答案: