1

jQuery アニメーションに問題があります。

2 つのオプションがある循環メニューがあります。オプションをクリックすると、円が分割され、両側が互いに離れて移動します。しかし問題は、新しい GET 変数と POST 変数でページを更新する前にアニメーションを終了させないことです。

2 つの部分を同時にアニメーション化し、続行する前にアニメーションを完了するための解決策を知っている人はいますか?

メニュー：

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の場合は両方とも完了しますが、失敗のリスクはわずかです）。 '両方とも1秒後に終了し、アニメーションの1つだけに'complete'を設定します。または、小数のギャップ（たとえば、0.1秒）を追加して、それを実行します。

したがって、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'); } }) 
});

編集

以下のコメントの後、必要なすべてのビットを追加し、「タイムアウト」機能などを修正しました（上記は間引きのアイデアを与えるためのサンプルです）。これは、「オン」（「ライブ」ではない）の使用、クリックのキャンセル、ローダーの追加など、微調整を加えたテストスクリプトです。

<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 に答える