Jquery Нажмите и toggleclass вопрос

Question

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

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

Когда вы нажимаете на изображение, заголовок DIV дальше анимирует и накладывает изображение полностью (работает нормально). Во время зависания на другом изображении в NAV The Papsion Div Angiates Aswell (работает нормально).

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

Вот 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);
})

и вот ссылка на DEV сайт

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

Answer 1

Это удаляет 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);
});

Answer 2

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

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);
});