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

回答

相關問題