ToggleClass оживить jQuery?

У меня есть раздел на моем веб-сайте, который, когда пользователь нажимает, мне бы хотелось, чтобы он расширялся, я использую jQuery toggleClass для этого...

expandable: function(e) {
    e.preventDefault();
    $(this).closest('article').toggleClass('expanded', 1000);
}

Это работает отлично, только я хотел бы как-то его оживить. В chrome моя статья медленно растет до нового размера, только в Firefox она "мгновенно" меняет размер без анимации, есть ли способ сделать это оживление?

Ответы

Ответ 1

jQuery UI расширяет jQuery native toggleClass, чтобы взять второй необязательный параметр: duration

toggleClass( class, [duration] )

Документы + DEMO

Ответ 2

.toggleClass() не будет анимироваться, вы должны пойти для метода slideToggle() или .animate().

Ответ 3

Вы можете просто использовать переходы CSS, см. эту скрипку

.on {
color:#fff;
transition:all 1s;
}

.off{
color:#000;
transition:all 1s;
}

Ответ 4

Вы должны посмотреть на функцию toggle, найденную на jQuery. Это позволит вам определить метод ослабления, чтобы определить, как работает переключатель.

slideToggle будет скользить вверх и вниз, а не влево/вправо, если это то, что вы ищете.

Если вам нужен класс, который нужно переключить, вы можете указать, что в функции toggle есть:

$(this).closest('article').toggle('slow', function() {
    $(this).toggleClass('expanded');
});

Ответ 5

Я попытался использовать метод toggleClass, чтобы скрыть элемент на моем сайте (используя видимость: скрытый, а не display: none) с небольшой анимацией, но по какой-то причине анимация не работала (возможно, из-за более старой версии пользовательского интерфейса jQuery).

Класс был удален и добавлен правильно, но добавленная продолжительность не показала никакой разницы - элемент был просто добавлен или удален без эффекта.

Итак, чтобы решить эту проблему, я использовал второй класс в методе toggle и вместо этого применил переход CSS:

CSS:

.hidden{
    visibility:hidden;
    opacity: 0;
    -moz-transition: opacity 1s, visibility 1.3s;
    -webkit-transition: opacity 1s, visibility 1.3s;
    -o-transition: opacity 1s, visibility 1.3s;
    transition: opacity 1s, visibility 1.3s;
}
.shown{
    visibility:visible;
    opacity: 1;
    -moz-transition: opacity 1s, visibility 1.3s;
    -webkit-transition: opacity 1s, visibility 1.3s;
    -o-transition: opacity 1s, visibility 1.3s;
    transition: opacity 1s, visibility 1.3s;
}

JS:

    function showOrHide() {
        $('#element').toggleClass("hidden shown");
    }

Спасибо @tomas.satinsky за замечательный (и супер простой) ответ на этот пост.

Ответ 6

Должен был отмечен, как только я включил библиотеку пользовательского интерфейса jQuery, он отлично работал и анимации...