jQuery добавляет исчезновение к .addClass
Как я постепенно появляюсь .addClass и.
Вот ссылка -
http://www.bikramyogajoondalup.com.au/about-bikram-yoga/postures-benefits.html
и вот код -
$(document).ready(function() {
$('#menu li#Q_01,#menu li#Q_03,#menu li#Q_05,#menu li#Q_07,#menu li#Q_09,#menu li#Q_11,#menu li#Q_13').hover(function() {
$(this).addClass('pretty-hover');
}, function() {
$(this).removeClass('pretty-hover');
});
});
$(document).ready(function() {
$('#menu li#Q_02,#menu li#Q_04,#menu li#Q_06,#menu li#Q_08,#menu li#Q_10,#menu li#Q_12').hover(function() {
$(this).addClass('pretty-hover_01');
}, function() {
$(this).removeClass('pretty-hover_01');
});
});
Спасибо
3 ответа
Если пользовательский интерфейс jQuery является опцией, для этого можно использовать .toggleClass (class, duration) .
Кроме того, вы, вероятно, можете упростить свой селектор, он выглядит так: : even и : odd будет выполнять работу на основе вашего текущего селектора, например:
$(function() {
$('#menu li:even').hover(function() {
$(this).toggleClass('pretty-hover', 500);
});
$('#menu li:odd').hover(function() {
$(this).toggleClass('pretty-hover_01', 500);
});
});
Я понимаю приведенное выше кажется обратным, но : даже действительно выбирает первый элемент , потому что он основан на 0, поэтому даже выбирает 0-й, 2-й, 4-й и т. д. Я надеюсь, вы согласитесь, делает его немного проще поддерживать :)
Редактировать на основе комментариев - Поскольку .toggleclass () залипает при быстром наведении курсора, вот альтернатива, которая работает, как ожидалось, только немного дольше:
$('#menu li.post:even').hover(function() {
$(this).stop().animate({ backgroundColor: '#009FDD', color: '#FFF' }, 500);
}, function() {
$(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500);
});
$('#menu li.post:odd').hover(function() {
$(this).stop().animate({ backgroundColor: '#623A10', color: '#FFF' }, 500);
}, function() {
$(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500);
});
Если вы хотите, чтобы цвета элемента выцветали, вам нужно использовать jQuery UI , который имеет расширенную поддержку затухания и анимация (ядро jQuery может только затухать / анимировать целочисленные свойства: цвета не работают).
Он даже поддерживает анимацию всех свойств всего класса CSS , поэтому с помощью пользовательского интерфейса jQuery вы сможете добиться желаемого эффекта.
функция jQuery .animate - лучший выбор, хотя это не позволит вам анимировать между классами CSS - вы должны указать индивидуальные стили.
Вам было бы лучше использовать пользовательский интерфейс jQquery, поскольку он обеспечит такую функциональность, как указано на странице jQuery animate :
Проект jQuery UI расширяет метод .animate (), позволяющий анимировать некоторые нечисловые стили, такие как цвета, .Проект также включает механизмы для определения анимации через классы CSS, а не отдельные атрибуты