什么可能导致 jQuery 动画以更少的步骤运行？答案

【问题标题】：What could cause a jQuery animation run in less steps?什么可能导致 jQuery 动画以更少的步骤运行？
【发布时间】：2011-12-01 16:50:52
【问题描述】：

我有一个 js 函数 scrollToTop()，它调用 jQuery animate 来像这样为 scrollTop 属性设置动画

function scrollToTop(){
    $('html, body').animate({ scrollTop: 0 }, {
        'duration':500,
        'step':function(){
            console.log('step',jQuery.fx.interval);
        }
    });
}

我有 2 个链接，每个链接都有一个不同的 .click 处理程序，其中调用了 scrollToTop 函数。当我从一个链接调用它时，动画是平滑的并且发生在 13 到 15 个步骤中，当从另一个链接处理程序调用时，动画是不稳定的并且发生在 2 到 3 个步骤中。 jQuery.fx.interval 在这两种情况下都是 13。

还有什么可以让 jQuery 以更少的步骤执行动画？

编辑：

根据要求，处理程序是：

$('.panel-item').click(function(e){    
    var item = $(this);

    if ($(item).hasClass('wa_reset'))
        $items.removeClass('active'); // this is declared earlier in the code $items = $('.panel');

    scrollToTop();
});

$('.scroll-top').click(function(e){
    scrollToTop();
});

没有其他处理程序附加到链接。

还需要注意的是，网站上和所有浏览器上的其他动画也会发生同样的情况。例如，图像滑块有时会以 20 步滑动到下一张图像，但在其他图像上则以 2-3 步滑动。复制问题的最一致方案是之前使用 scrollToTop 函数所述的方案。

【问题讨论】：

你能提供两个链接的 HTML 吗？他们中的任何一个是否附加了任何其他事件处理程序？
只有小代码sn-ps很难猜出原因。你能准备一个重现行为的jsfiddle吗？

标签： jquery jquery-animate

【解决方案1】：

好的，回答我自己的问题。事实证明，on click 事件是在一个深深嵌套在页面标记内的元素上触发的。因此，该事件通过冒泡导致 jquery 响应延迟。在点击处理程序中使用e.stopPropagation(); 避免了冒泡并允许动画以正确的速度执行。然而，为什么 jQuery 内部的间隔变化对我来说仍然是一个谜。

【讨论】：