JQuery добавить fade в .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');
  });
});

Спасибо

Ответ 1

Если jQuery UI является опцией, вы можете использовать .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);
  });
});

Я понимаю, что вышеизложенное кажется обратным, но :even выбирает первый элемент, потому что он основан на 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);  
});

Ответ 2

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

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

Ответ 3

функция jQuery . animate - лучший вариант, хотя это не позволит вам анимировать между классами CSS - вам нужно указать отдельные стили.

Вам лучше использовать пользовательский интерфейс jQquery, поскольку это обеспечит такую функциональность, как указано в jQuery animate страница:

Проект jQuery UI расширяет .animate(), позволяя некоторым нечисловые стили, такие как цвета для быть анимированным. Проект также включает механизмы для определения анимации через классы CSS, а не индивидуальные атрибуты