Question

SCENARIO

我开发了一个使用jQuery的函数，它可以监听用户的鼠标输入（基于 mousewheel 插件）。

我用一个函数分析用户的输入，并改变鼠标的默认行为，以便用动画滚动给定的px值。

问题

网页中有div个容器，可以在悬停时改变其大小。

这会导致我原来的鼠标滚轮动画延迟其动作一段时间（或多或少，半秒）。如果div悬停，并且之后很快滚动鼠标滚轮，效果将无法顺利运行100％（滚动动画执行时会导致一点延迟，之后会显示动画已经在运行了。）

如果我删除容器中的转换，问题就解决了。但是，我希望原始CSS保持原样，并顺利运行原始动画。

我该如何做到这一点？

的jsfiddle

http://jsfiddle.net/kouk/z7p0vxpg/

JS CODE

$(function () {

    function wheel($div, deltaY) {


       if (deltaY == -1) {

            var dest = ($(document).scrollTop()+500);

            $('html,body').animate({scrollTop: dest}, 1000);

            return false;        


        } else if (deltaY == 1) {

            var dest = ($(document).scrollTop()-500);

            $('html,body').animate({scrollTop: dest}, 1000);

            return false;    

        }



    }

    $('html').bind('mousewheel', function (event, delta, deltaX, deltaY) {

        if ($('html,body').is(":animated")){

            return false;

        }

        if ( (delta > -2) && (delta < 2) ) {

            wheel($(this), deltaY);
            event.preventDefault();

            console.log(delta);

        }

    });

});

Answer 1

这是animate()功能的常见问题。之前的动画排在队列中并且落后。你应该在开始下一个动画之前清空动画队列，以避免“滞后”的感觉。

有两个功能可以让您这样做：finish()和stop()。我建议使用finish，因为它将停止正在运行的动画）和删除所有排队的动画。这是你可以立即开始你的最新动画。

用户不一定要等待他之前已经开始新动作的动画。

以下是一些示例代码：

$('html,body').dequeue().animate({scrollTop: dest}, 1000);

查看行为是否符合您的预期。

您的代码（使用finish()更新） - http://jsfiddle.net/z7p0vxpg/15/

鼠标滚轮和转换不兼容

1 个答案: