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 hide - 没关系。 但是当我将鼠标悬停在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() ，现在它可以工作了。 小问题是，当您将鼠标悬停进出几次时，动画会再运行几次。