Question

here’s my probably (and hopefully) simple problem:

i have a list with images as navigation. when you hover over them, jquery animates a div with a caption and shows it. it disapears on mouseout. (works fine)

when you click on the image, the caption div animates further and is overlaying the image completly (works fine). while hovering over another image in the nav the caption div animates aswell (works fine).

the problem: when clicking a second navigation image, the animation of the first one(clicked) should disapear.

here’s the 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);
})

and here’s a link to the dev site

any help is welcome, thanks.

Answer 1

This removes the clicked class and animates it back down and returns the opacity back to 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);
});