jQuery悬停动画单击问题

将图像列表作为导航。当你将鼠标悬停在它们上面时,一个带有透明背景的div会向上滑动。当你悬停时,div向下滑动。

那部分很有魅力。

现在,当您单击图像或标题时,带有标题的div将其不透明度更改为1,移动到图像的顶部并获得100%的高度。

问题是当我悬停时,title div再次隐藏。那么,我怎样才能在单击时停止悬停效果呢?

我已经试过用视图解决类似问题,但没能开始工作。。我对jQuery很陌生,所以任何帮助都会被告知。

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