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()將解決此問題，它可能是值得理解問題的根源。

在這種情況下，用戶觀察動畫中的延遲，因爲多個動畫在其之前的隊列中。

隊列備份的一個貢獻者，因爲動畫函數完成調用每個動畫元素執行一次，而不是整個動畫執行一次。在以下示例中，完成的調用會被調用兩次，然後調用另一個動畫，導致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"); 
     }); 
     }); 
    }); 
    }); 
});