Question

我有一个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');
    }

});

小提琴：http://jsfiddle.net/9857R/1/

Answer 1

你需要查看html树。当用鼠标悬停文本元素时，鼠标就会离开图像元素。

这会导致文本向下滑动，将鼠标放回图像元素上，导致它向上滑动，然后卡在永久循环中。

使用包含两者的主容器来绑定事件。由于文本元素包含在主元素中，因此将鼠标悬停在原因上并不会导致问题，因为鼠标永远不会离开父元素

然后您可以将代码缩减为：

$(".student ").hover(function () {          
    $(this).find('.student-info').stop(true,true).slideToggle("fast");    
});

如果你在动画完成之前再次移动鼠标，

stop()用于防止事件排队

的 DEMO

内部div的事件累积来自外部div的事件数

1 个答案: