jQuery hover animate & click problem

Question

Hey there,

have a list of images as a navigation. when you hover over them a div with transparent background slides up. when you hover out the div slides down.

that part wokes like a charm.

now when you click on the image or title, the div with the title changes its opacity to 1, moves to the top of the image and gains 100% height.

the problem is when i hover out the title div hides again. so how can i stop the hover out effect on click?

i already tried a view solutions to similar problems but didn't get to work.. i'm quite new to jQuery so any help would be appriciated.

here is the code so far with a try using .unbind:

var thumbslide = $('.boxgrid.captionfull').hover(
    function() { //Hover over
        $(this).children('.cover').stop().animate({'top':'130px'},{queue:false,duration:350});
    },function() { //Hover out
        $(this).children('.cover').stop().animate({'top':'230px'},{queue:false,duration:350});
    }
    ).click(function() {
        $(this).children('.cover').stop().animate({'top':'0px', height:"230px", opacity:"1"},{queue:false,duration:350}).unbind('mouseleave');
});

Answer 1

you could simple check the widht or opacity on hover out...

inside the hover out function you do

if($(this).children('.cover').css('opacity')!=1){
$(this).children('.cover').stop().animate({'top':'230px'},{queue:false,duration:350});
}

Answer 2

It's because you're unbind the children, not the element you're on. Rearrange it like this:

$(this).unbind('mouseleave').children('.cover').stop().animate({'top':'0px', height:"230px", opacity:"1"},{queue:false,duration:350});