JQuery - lags during animation

Question

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.

Answer 1

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