jQuery Добавьте исчезновение на .addclass

StackOverflow https://stackoverflow.com/questions/2719178

  •  01-10-2019
  •  | 
  •  

Вопрос

Как я исчезнул .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');
  });
});

Спасибо

Это было полезно?

Решение

Если 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);  
});

Другие советы

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

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

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

Вам было бы лучше использовать jqquery ui, так как это обеспечило бы такого рода функциональность, как указано в jQuery анимация страница:

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top