はJQueryアニメーション遅延問題

Question

は、私がこのサイトを持っている：

http://p33.yamandi.com/

ほとんどすべては一つの小さな迷惑な事を除いて、正常に動作します - 遅延。 Rossmanメニュー項目をクリックすると、 "zamknij"アイコンで閉じてから別のメニュー項目を一度にクリックしてみてください。あなたは1-2秒の遅延に気付くでしょう。私はこの問題の理由が何であるか分かりません。それはすべてのブラウザで起こります。誰も助けることができますか？

よろしく、これはあなたの問題であれば デビッド

Answer 1

全くわからないが、あなたがアニメーション化しているすべての要素にanimate()前stop()を呼び出してみてください。このような何か：

$(window).load(function() { 
    mCustomScrollbars(); 
    $(function(){ 
    $("ul#menu a").click(function() { 
     myId = this.id; 
     $('.text').stop(); 
     $("ul#menu, h1#logo").stop().animate({left: '-=572'}, 500, function() { 
     $("#lang").css("display", "none"); 
     $("#"+myId+"pr").stop().animate({left: 0}, 200); 
     if(myId == "dojazd") { 
      $("#outer-mapka").css("left", "50%").css("margin-left", "-213px"); 
     } else { 
      api.goTo(myId.charAt(myId.length-1)); 
     } 
     }); 
    }); 
    $("a.close").click(function() { 
     api.goTo(1); 
     $(".text").stop().animate({left: "-=950"}, 200, function() { 
     $(".text, #outer-mapka").css("left", "-950px"); 
     $("ul#menu, h1#logo").stop().animate({left: '0'}, 500, function() {}); 
     $("#lang").css("display", "block"); 
     }); 
    }); 
    }); 
}); 

Answer 2

animate()前stop()を追加しても問題が解決しますが、それは問題の原因を理解する価値があるかもしれません。

この場合、複数のアニメーションがその前のキューにあるため、ユーザーはアニメーションの遅延を観察します。

アニメーション機能の完了コールがアニメーション要素ごとに1回実行されるため、アニメーション全体に対して1回ではなく、1回キューにバックアップすることに貢献します。次の例では、完全な呼び出しが2回呼び出され、別のアニメーションが呼び出され、4つのアニメーションがキューに入ります。例えば

：

$("ul#menu a").click(function() { 
    myId = this.id; 
    $("ul#menu, h1#logo").animate({left: '-=572'}, 500, function() { 
    // This code will run twice, once when ul#menu finishes animating 
    // and once when h1#logo finishes animating. Is this the desired 
    // behavior? Is it safe to call api.goTo() twice?  
    $("#lang").css("display", "none"); 
    $("#"+myId+"pr").animate({left: 0}, 200); 

    if(myId == "dojazd") { 
     $("#outer-mapka").css("left", "50%").css("margin-left", "-213px"); 
    } 
    else {  
     api.goTo(myId.charAt(myId.length-1));  
    } 
    }); 
}); 

キューのバックアップに別の要因、および主要な貢献は、ため、一般的なセレクタです。次の例では、閉じたリンクをクリックすると、7つのテキストクラスすべてがアニメートされ、完了すると2つのアニメーションがさらに発生します。 21のアニメーションで結果：

$("a.close").click(function() { 
    api.goTo(1); 
    // The .text selector matches seven different elements. Thus, a when 
    // clicking the close link, seven animations are added to the queue. 
    $(".text").animate({left: "-=950"}, 200, function() { 
    $(".text, #outer-mapka").css("left", "-950px"); 
    // And two more animations are added to the queue. 
    $("ul#menu, h1#logo").animate({left: '0'}, 500, function() {}); 
    $("#lang").css("display", "block"); 
    }); 
}); 

メニューをクリックしたときにこのように、ページを閉じ、再度メニューをクリックし、遅延がキューを通過する21件のアニメーションを待って観察することができました。

この問題を解決するには、完全な関数を実行するかどうかを示すフラグを使用できます。さらに、セレクタをより具体的にすることで、不要な呼び出しを防ぐことができます。ここでは両方を実装可能なソ​​リューションです：

$(window).load(function() { 
    mCustomScrollbars(); 
    $(function(){   
    var menu_visible=true; // Flag to indicate if menu is visible. 
    $("ul#menu a").click(function() { 
     myId = this.id;  
     $("ul#menu, h1#logo").animate({left: '-=572'}, 500, function() { 
      // If the menu is not visible, then return as this function has 
      // already ran. 
      if (!menu_visible) return; 

      // Will be hiding the menu, so set the flag to false. 
      menu_visible = false; 

      $("#lang").css("display", "none"); 
      $("#"+myId+"pr").animate({left: 0}, 200); 

      if(myId == "dojazd") { 
      $("#outer-mapka").css("left", "50%").css("margin-left", "-213px"); 
      } 
      else {   
      api.goTo(myId.charAt(myId.length-1));   
      } 
     }); 
    }); 

    // For each text class. 
    $(".text").each(function() { 
     // Store a handle to the text. 
     var $text=$(this); 
     // Add a click event to a close link within the text. 
     $("a.close", $text).click(function() { 
     api.goTo(1); 
     // Only animate the text containing the close link. 
     $text.animate({left: "-=950"}, 200, function() { 
      $(".text, #outer-mapka").css("left", "-950px"); 
      $("ul#menu, h1#logo").animate({left: '0'}, 500, function() { 
      // The menu is visible so set the flag. 
      menu_visible=true; 
      }) ; 
      $("#lang").css("display", "block"); 
     }); 
     }); 
    }); 
    }); 
});