1

我的 jQuery 动画有问题。

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

有谁知道让两个部分同时动画并在继续之前让动画完成的解决方案？

菜单：

http://imgur.com/iLjFb

代码：

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

1 回答 1

0

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

.

于 2012-06-21T10:52:29.380 回答