動畫開始延遲

Question

我已經寫過腳本，它從外部的php文件加載內容。我使用jquery1-9-1。我的腳本正常工作，除了當我第二次點擊按鈕時。在動畫開始之前有0.5秒的延遲。我想我知道什麼是問題，它在哪裏。必須在第一次點擊時執行$("#header").animate({marginTop: "10px"...。點擊一次後，它必須停用。誰知道如何解決它？不要判斷我如此苛刻和對不起我的英語

$(document).ready(function() { 
    var content = $("#content"); 
    $("#main_menu a").click(function() { 
     var id = this.id; 
     $("#header").animate({ 
      marginTop: "10px" 
     }, 500, function() { 
      $("#content").fadeOut(500, function() { 
       $("#content").load(id + ".php") 
       $("#content").fadeIn(500) 
      }) 
     }) 
    }) 
}) 

Answer 1

我要問，什麼是緩存content = $("#content")的點，如果你再拒絕使用它，只是叫$("#content")反覆以後呢？

無論如何，你需要一個變量來判斷它是第一次運行與否：

$(function() { 
     var content = $("#content"), isfirst = true; 
     $("#main_menu a").click(function() { 
      var id = this.id, 
       reveal = function() { 
        content.fadeOut(500, function() { 
         content.load(id + ".php") 
         content.fadeIn(500) 
        }); 
       }; 
      if(isfirst) $("#header").animate({marginTop: "10px"}, 500, reveal); 
      else reveal(); 
      isfirst = false; 
     }); 
    }); 

Answer 2

你需要跟蹤它是否已加載，在這種情況下。一個簡單的變量和一些封應該這樣做：

var isLoaded = false; 
$("#main_menu a").click(function() { 
      var id = this.id; 
      if (!isLoaded) { 
       $("#header").animate({ 
       marginTop: "10px" 
       }, 500); 
       isLoaded = true; 
      } 
      $("#content").fadeOut(500, function() { 
      $("#content").load(id + ".php") 
      $("#content").fadeIn(500) 
     }) 
    });