我有一个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之后不断地上下滑动。 / p>
我有什么遗失的东西吗?
这是我当前的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');
}
});
答案 0 :(得分:2)
你需要查看html树。当用鼠标悬停文本元素时,鼠标就会离开图像元素。
这会导致文本向下滑动,将鼠标放回图像元素上,导致它向上滑动,然后卡在永久循环中。
使用包含两者的主容器来绑定事件。由于文本元素包含在主元素中,因此将鼠标悬停在原因上并不会导致问题,因为鼠标永远不会离开父元素
然后您可以将代码缩减为:
$(".student ").hover(function () {
$(this).find('.student-info').stop(true,true).slideToggle("fast");
});
如果你在动画完成之前再次移动鼠标, stop()
用于防止事件排队
的 DEMO 强>