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

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

在你执行的鼠标悬停功能中

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

Answer 2

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

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

jQuery悬停animate＆amp;点击问题

2 个答案: