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