我有一个如下所示的 html 标记:
<div class="student">
<div class="student-main-image">
<div id="student-image-154"><img src="http://goo.gl/5wMt0o"></div>
</div>
<div class="student-info">
Johnna Smith
</div>
</div>
我想做的就是简单地滑入和滑出包含一些文本的内部 div。如果父容器悬停,则滑入内部 div,否则将其滑出,但如果在主 div 悬停之后立即悬停,则保持内部 div 不显示。
如果父div悬停,我能够完成滑入和滑出内部div,但我无法弄清楚为什么内部div在悬停在父div之后时会不断上下滑动。
我有什么遗漏的吗?
这是我当前的js代码:
$(".student .student-main-image").hover(function () {
$(this).next().slideDown("fast");
console.log('in');
}, function(){
$(this).next().hover(function () {
$(this).slideDown("fast");
console.log('in');
}, function(){
$(this).slideUp("fast");
console.log('out');
});
if($(this).next().is(":visible")) {
$(this).next().slideUp("fast");
console.log('hide it');
} else {
console.log('nothing to hide');
}
});
fiddle :http://jsfiddle.net/9857R/1/
最佳答案
您需要查看 html 树。当您将鼠标悬停在文本元素上打开文本元素时,您的鼠标将离开图像元素。
这会导致文本向下滑动,将鼠标放回图像元素上,导致文本向上滑动,您就会陷入永久循环。
使用容纳两者的主容器来绑定(bind)事件。由于文本元素包含在主元素中,因此将子元素悬停不会导致问题,因为鼠标从未离开父元素
然后您可以将代码减少为:
$(".student ").hover(function () {
$(this).find('.student-info').stop(true,true).slideToggle("fast");
});
stop()
用于防止在动画完成之前再次移动鼠标时事件排队
关于javascript - 内部 div 的事件累积外部 div 的事件数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24870263/