Плавное изменение класса jQuery?

Question

[Борис Якушев]

Добрый день.
Подскажите, пожалуйста, как реализовать плавное изменение класса на блоке?

Есть 2 стандартных блока left_block, right_block. Есть кнопка при клике на которую я скрываю right_block.
И при скрытии у left_block меняю класс с col-lg-8 на col-lg-12.

function showRight(){
    $('.right_block').animate({
        "width": "toggle"
    }, 800, function () {
        $('.left_block').toggleClass('col-lg-8').toggleClass('col-lg-12');
    });
}

Но если мне нужно открыть скрытый блок, то сначала отобразится скрытый блок и только потом поменяется класс у left_block и они станут на всю ширину. И это действие выглядит некрасиво. Каким образом реализовать плавность при смене класса?

Всем спасибо за советы.

Answer 1

[Константин Громов]

В jQuery UI есть switchClass, который внутри себя проводит сравнение всех рассчитанных стилей элемента (а их там несколько сотен) с одним классом и с другим. И те, которые изменились, анимирует обычным образом, если может. Если jQuery UI не используете, то можно на оф. сайте сделать сборку оставив одну галочку на Effects Core, она будет включать в себя switchClass и весить 16KB в сжатом виде. Ну или вовсе написать свою реализацию по тому же принципу, сравнивая только нужные стили (только width?).

Другой путь: использовать css-transition и управлять порядком исполнения анимации вешая callback'и на событие ontransitionend (IE11+, если не ошибаюсь).