jQuery Animate proprierty Lag

developers! I'm developing an promotional website where the homepage and the subpages is in the same index. The transition of the content happens on the click of the menu. Okay.

Have 4 subpages. Two on the left and two on the right. When clicks on the first option of the left, the second hide. When clicks on the second option, the first hide.

You can see better here: http://www.safiradigital.com.br/kennermusiclab/

But, i have a problem in this .animate() left transition. From the left to the right, sometimes occur a big delay to the animate execute.

Example, click on "O que é Music Lab?" and after, click on "Inscrição". You see an big delay to the body transition.

Anyone h开发者_运维知识库ave an solution to fix this delay bug on .animate()?

My JS is:

$(".o-que-e").click(function() {
    $(".content-geral").animate({
        left: '195'
    },2700); // Durante 2700 milisegundos
    $(".videos-interna").hide();
    $(".o-que-e-interna").show();
}); // Finaliza o click

$(".galeria-videos").click(function() {
    $(".content-geral").animate({
        left: '195'
    },2700);
    $(".videos-interna").show();
    $(".o-que-e-interna").hide();
    }); // Finaliza o click

$(".inscricao").click(function() {
    $(".content-geral").animate({
        left: '-3986'
    },2700);
            $(".regulamento-interna").hide();
            $(".inscricao-interna").show();
});

$(".regulamento").click(function() {
    $(".content-geral").animate({
        left: '-3986'
    },2700);
    $(".inscricao-interna").hide();
    $(".regulamento-interna").show();
});

my guess is you have more than one link with class 'o-que-e'. your click handler calls them all. so you are animating more than once for each click. that might slow things down.

A bit late here, but when you're working with large areas (such as animating the .inscricao element left -3986 pixels) Chrome especially suffers from delays.

See my answer here and maybe it will help: https://stackoverflow.com/a/15634773/2211053