jQuery 为什么代码使用 .animate() 函数运行两次？

Question

在我当前的 jQuery 代码中，我希望能够在我的网页顶部设置动画，然后立即下拉一个隐藏的元素。问题是我正在使用 if 语句来检查此元素是否隐藏，但我的代码通过该 if 语句运行了两次，导致下拉列表在向下滑动后立即向上滑动。

当我运行以下代码时:

$("a#drop-user-box").click(function()
{
    $("html, body").animate({scrollTop: 0}, "slow", function()
    {
        alert("foo");
    });
    return false;
});

它会弹出一个警报，当我点击例如“确定”按钮，另一个警报弹出(意味着代码运行两次)。谁能解释一下为什么会这样？

当我像这样添加警报时:

$("a#drop-user-box").click(function()
{
    alert("foo");
    //$("html, body").animate({scrollTop: 0}, "slow", function()
    //{

    //});
    //return false;
});

它将运行代码(在这个(示例)案例中是警报)一次(但不会在之后)。

JSFiddle

Answer 1

这是因为您正在为两个元素(body 和 html)设置动画，因此有两个动画完成回调。使用 promise 方法如您所愿。

$("html, body").animate({scrollTop: 0}, "slow")
.promise().then(function() {
    alert("foo");
});

https://jsfiddle.net/719xffa5/3/