jQuery 悬停动画 &点击问题

Question

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

那部分像魅力一样醒来。

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

问题是当我将鼠标悬停在标题 div 上时再次隐藏。那么我怎样才能停止点击时的悬停效果呢？

我已经尝试过查看类似问题的解决方案，但没有开始工作。我对 jQuery 很陌生，所以任何帮助都会得到帮助。

这是到目前为止尝试使用 .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

这是因为您解除了子元素的绑定，而不是您所在的元素。像这样重新排列它：

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

Answer 2

您可以简单地检查悬停时的宽度或不透明度...

在您执行的悬停功能内

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