animation starts with delay

Question

i have writen script which loads content from external php file. i'm using jquery1-9-1. my script works normal, except that moment when i'm clicking on button second time. there is delay for 0.5s before the animation starts. i think i know what is the problem and where is it. $("#header").animate({marginTop: "10px"... must execute just on the first click. after this clicked once, it must be deactivated. who knows how to solve it? don judge me so harsh and sorry my english

$(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

You need to track whether or not it has loaded, in that case. A simple variable and some closure should do it:

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)
       })
  });

Answer 2

I have to ask, what is the point of caching content = $("#content") if you then refuse to use it and just call $("#content") repeatedly later?

Anyway, you need a variable to tell if it's the first run or not:

    $(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;
        });
    });