Включение Fade в addClass jQuery - PullRequest
Новая
       77

Включение Fade в addClass jQuery

3 голосов
/ 18 апреля 2011

У меня есть этот простой код: 

$('.featureItems li').hover(
       function(){ $(this).addClass('hover') },
       function(){ $(this).removeClass('hover') }
)

Как включить эффект затухания, чтобы класс добавления / удаления был более постепенным?

Требуется ли animate ()?

Спасибо

Ответы [ 4 ]

5 голосов
/ 18 апреля 2011

Если вы также используете пользовательский интерфейс jQuery, он улучшает методы добавления / удаления CSS, так что они принимают второй параметр, который представляет собой задержку (в миллисекундах) для анимации изменения CSS. Чтобы оживить изменение за полсекунды, например: 

$('.featureItems li').hover(
   function(){ $(this).addClass('hover', 500) },
   function(){ $(this).removeClass('hover', 500) }
)

Обновление:

Чтобы предотвратить застревание или несогласованность очереди анимации во время последовательностей быстрого наведения / вывода, можно также принудительно остановить существующие анимации перед запуском add / removeClass: 

$('.featureItems li').hover(
   function(){ $(this).stop(true).addClass('hover', 500) },
   function(){ $(this).stop(true).removeClass('hover', 500) }
)
1 голос
/ 03 апреля 2012

Другой, не являющийся javascript, альтернативой этому было бы изменить: .featureItems li в вашем CSS, чтобы иметь следующие свойства: 

.featureItems li {
    transition: transform 1s, background-color 1s;
    -moz-transition: -moz-transform 1s, background-color 1s;
    -webkit-transition: -webkit-transform 1s, background-color 1s;
    -o-transition: -o-transform 1s, background-color 1s;
}

, что позволило бы CSS3 перемещаться между любыми изменениями, которые вы вносите в.hover, например: 

.hover {
    background-color: #DDD;
    transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -webkit-transform:scale(1.1,1.1);
    -o-transform:scale(1.1,1.1);
}

Более подробную информацию о переходах CSS3 можно найти здесь:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

1 голос
/ 03 февраля 2012

В дополнение к ответу @ Dave Ward мне пришлось удалить часть stop(true) для removeClass (), в противном случае после первого наведения мыши / наведения мыши часть наведения мыши перестает работать: 

$('.featureItems li').hover(
   function(){ $(this).stop(true).addClass('hover', 500) },
   function(){ $(this).removeClass('hover', 500) }
)
1 голос
/ 18 апреля 2011

В дополнение к ответу @Dave Ward, есть автономный плагин , который делает это в случае, если вы не хотите использовать jQuery UI .

...