jQuery等待动画继续执行PHP

我有一个有两个选项的圆形菜单。当我点击一个选项的时候，这个圆圈就会分裂，并且两边都会相互移动。但问题在于，在使用新的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>";

来源

2012-06-21 SubChord

请删除此问题中的“php”标记。复制http://stackoverflow.com/questions/1251300/how-to-run-two-jquery-animations-simultaneously – dmmd

unqueueing them 这里是解决方案：http://stackoverflow.com/questions/1251300/how-to-run-two-jquery-animations- –

的 “动画” 的最后一个参数是 “完成”。这是您可以在动画完成时运行的功能 - 即您要求的功能。（除非你设置了一个变量= 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-21 10:52:29 Robbie

我看到你在那里做什么，但是当我实现上面的代码时，它仍然不起作用。我认为这是因为在动画结束之前触发页面重新加载。我试过了，返回false;声明使动画完整，但它也设置相同的href每次。 – SubChord

对不起 - 他们打算给一个想法的想法。我已经将它们更正为答案的第二部分中的完整工作代码示例（包括删除现在弃用的函数“live”;如果您使用的是旧版本的jQuery，请将它放回原处） – Robbie

jQuery等待动画继续执行PHP

回答

相关问题