javascript - jQuery 悬停 - div 不显示

Question

我有这个 jQuery 代码:

$("#people td, #list td").hover(function() {
    $(this).stop().animate({
        backgroundColor: "#444"
    }, "fast");
    $(this).find(".controls").stop().fadeIn("fast");
}, function() {
    $(this).stop().animate({
        backgroundColor: "#333"
    }, "fast");
    $(this).find(".controls").stop().fadeOut("fast");
});

$("#list .controls").hide();

.controls 是一个 div，其中包含一些与条目一起使用的链接(例如页面上有 10 个条目)。直到这一刻之前一切都有效，但现在不再有效了。 当我打开页面时，.controls 隐藏 - 没关系。 但是当我将鼠标悬停在 td 上时，CSS 动画会运行，但 fadeIn 不会运行。第二个函数中的 fadeOut 也是如此(当触发 mouseleave 事件时)。

HTML如下:

<td>
    <div class="icons">

</div>
<div class="profile">
    <div class="info">
    <div class="name">

            </div>
        </div>
        <div class="controls">
    <a href="http://...">Link</a>
            <a href="http://...">Link</a>
        </div>
        <div class="clear"></div>
</div>
</td>

Answer 1

这很奇怪。我在 .find(".controls") 之后删除了 .stop() ，现在它可以工作了。 小问题是，当您将鼠标悬停几次时，动画会再运行几次。