JQuery добавить исчезновение в .addClass - PullRequest
Новая
       30

JQuery добавить исчезновение в .addClass

17 голосов
/ 27 апреля 2010

Как мне исчезать .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 ]

13 голосов
/ 28 апреля 2010

Если 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);  
});
0 голосов
/ 27 апреля 2010

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

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

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

0 голосов
/ 27 апреля 2010

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

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

...