Jquery щелчок и вопрос toggleClass

вот моя, вероятно (и, надеюсь), простая проблема:

у меня есть список с изображениями в качестве навигации. когда вы наводите на них курсор, jquery анимирует div с заголовком и показывает его. он исчезает при наведении мыши. (работает отлично)

когда вы нажимаете на изображение, div заголовка анимируется дальше и полностью накладывается на изображение (отлично работает). при наведении курсора на другое изображение в навигации также анимируется заголовок div (отлично работает).

проблема: при нажатии на второе навигационное изображение анимация первого (нажатого) должна исчезнуть.

вот jquery:

var thumbslide = $('.boxgrid.captionfull').click(function() {
   $(this).toggleClass('clicked').children('.cover').stop().animate({top: 0, height:"230px", opacity: 1}, 350);
});
$('.boxgrid.captionfull:not(.clicked)').live('mouseenter', function() {
    $(this).children('.cover').stop().animate({top: 130}, 350);
}).live('mouseleave', function() {
    $(this).children('.cover').stop().animate({top: 230}, 350);
})

а вот ссылка на сайт разработчиков

любая помощь приветствуется, спасибо.


navigation click jquery hover toggleclass
person tobiasmay    schedule 08.11.2010    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Это удаляет класс clicked, анимирует его обратно и возвращает непрозрачность обратно к 0,7:

var thumbslide = $('.boxgrid.captionfull').click(function() {
   $('.boxgrid.captionfull.clicked').removeClass('clicked').children('.cover').stop().animate({top: 230, opacity: 0.7}, 350);
   $(this).toggleClass('clicked').children('.cover').stop().animate({top: 0, height:"230px", opacity: 1}, 350);
});
person PetersenDidIt    schedule 08.11.2010
comment
классно. работает. но почему код jamiecs (без части анимации) работал только при повторном наведении курсора на последний элемент? я имею в виду ... он удалил класс, но не должен ли он также вернуться в свое предыдущее состояние? просто интересуюсь.. - person tobiasmay; 08.11.2010
comment
Потому что ваш код mouseenter / mouseleave устанавливает значение top. Поэтому, когда вы наведете на него курсор мыши, он все равно будет выполнять эту анимацию, но непрозрачность не будет восстановлена. - person PetersenDidIt; 09.11.2010

arrow_upward
0
arrow_downward

Разве это не случай поиска любого другого элемента, по которому щелкнули, и удаления его класса, по которому щелкнули?

var thumbslide = $('.boxgrid.captionfull').click(function() {
   $('.boxgrid.captionfull.clicked').removeClass('clicked');
   $(this).toggleClass('clicked').children('.cover').stop().animate({top: 0, height:"230px", opacity: 1}, 350);
});
person Jamiec    schedule 08.11.2010
comment
думаю, это своего рода путь, но когда я пытаюсь сделать это таким образом, он удаляет только щелкнутый класс при наведении курсора на ранее щелкнутый элемент. - person tobiasmay; 08.11.2010
comment
@tobiasmay - можете ли вы настроить упрощенный jsfiddle, показывающий проблему. www.jsfiddle.net - person Jamiec; 08.11.2010
comment
думаю, скрипка уже устарела... но большое спасибо за усилия! - person tobiasmay; 08.11.2010