Question

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

Answer 1

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.