JQuery - lags during animation

Question

Hello, I have to get some effects when content is changing. Here is my jquery-code:

function contentHide( parentElement, callback )
{
    parentElement.animate({
        "height" : "hide", "opacity" : 0.0
    }, "slow", "linear", callback);
}

function contentShow( parentElement )
{
    parentElement.animate({
            "height" : "show", "opacity" : 0.7
    }, "slow", "linear");
}

And when content is changing I have a big lags. At first seconds on the page everything is ok.

You could see the demo: http://94.178.48.3/adm-net/. Sorry, that content isn't english. Just try to click on menu parts at the top of page, in a few seconds there are lags. Could you process my code, please?

Answer 1

Hi Ockonal, Animations are very processor power hungry. I've always tried to limit it to animating 1 property at a time (where possible) to limit the cpu pull. for example animate the height then the opacity via the callback, something like;

parentElement.animate(
    {"height" : "hide"}, "slow", "linear", function() {
        parentElement.animate({"opacity" : 0.0}, "slow", "linear", callback);
    }
);