Question

我有一个js函数scrollToTop()，它调用jQuery动画来设置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函数说明的情况。

Answer 1

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

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

1 个答案: