Как остановить эффект jQuery для пункта меню с классом .curent? - PullRequest
Новая
       17

Как остановить эффект jQuery для пункта меню с классом .curent?

0 голосов
/ 29 января 2012

У меня есть список категорий блогов на боковой панели справа от моей страницы.

Я настроил эффект jQuery, чтобы при наведении курсора на название категории он анимировался с отступом в 5 пикселей слева.

Все работает хорошо, но если вы нажмете на категорию, я хочу, чтобы она переместила вас на страницу этой категории с тем же списком боковых панелей категории, но с текущей категорией, имеющей класс .current.

Я бы хотел, чтобы текущая категория уже имела отступ в 5 пикселей слева и не имел никакого эффекта при наведении курсора.

В основном, чтобы выделить его среди других категорий в списке.

Вот jQuery, который у меня есть: 

// blog categories animation
$(function() {
    $('#blog-categories ul li a').hover(
    function(){ $(this).find('img').animate({paddingLeft: '+=5'}, 100); },
    function(){ $(this).find('img').animate({paddingLeft: '-=5'}, 100); }
    );
});

Если кто-нибудь знает хороший способ добавить 5-пиксельный отступ, уже присутствующий в текущей позиции категории.

т.е. '# blog-Categories ul li a.current'

и без дополнительной анимации при наведении курсора, это было бы здорово!

Надеюсь, я все объяснил здесь хорошо:)

Вот скриншот того, что я хотел бы видеть в категории .current:

enter image description here

1 Ответ

1 голос
/ 29 января 2012

Попробуйте использовать метод .not () 

$(function() {
    $('#blog-categories ul li a').hover(
    function(){ $(this).not('.current').find('img').animate({paddingLeft: '+=5'}, 100); },
    function(){ $(this).not('.current').find('img').animate({paddingLeft: '-=5'}, 100); }
    );
});

Чтобы добавить 5px, почему бы просто не добавить его в класс .current?

...