JQuery - лаги во время анимации

Question

Я должен получить некоторые эффекты, когда контент меняется. Вот мой jquery-код:

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

А когда контент меняется, у меня большие лаги. В первые секунды на странице все ок.

Answer 1

Анимации очень сильно загружают процессор. Я всегда пытался ограничить его анимацией 1 свойства за раз (где это возможно), чтобы ограничить загрузку процессора. например, анимируйте высоту, затем непрозрачность с помощью обратного вызова, что-то вроде:

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