Jquery нажмите и toggleClass вопрос

Question

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

У меня есть список с изображениями как навигация. когда вы наводите на них курсор, 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); 
}) 

и вот ссылка на dev site

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

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