停止jquery动画。建造一个旋转木马

Question

我正在学习javascript、jquery和Im，试图创建自己的旋转木马。我目前遇到的问题如下。当用户停止在旋转木马中滚动时，我有一个函数运行并将我的目标旋转木马项目集中到我想要的点。我在小提琴上用黑线说明了这一点。下面是我的函数，以该项目为中心：

    jQuery.fn.CenterToPoint = function(){
    return this.each(function(){

        Offset = $(this).offset().left;
        Width = $(this).width();
        Illuminate_Point = 0.45 * $(window).width();
        ScrollLeft = Illuminate_Point - (Offset+Width/2); 

        $Container.animate({scrollLeft: "-=" + ScrollLeft},450);
        }); 
}

但是，我希望用户能够滚动，即使动画正在运行。如果用户在我的旋转木马上单击、使用mousescroll或触控板，我如何才能杀死该动画？这是我的jFiddle：http://jsfiddle.net/ptp05jvo/

Answer 1

据我所知，你的问题是：

1. 盒子在到达所需的点(黑线)后开始抽动。
2. 当动画(方框向黑线移动)时，用户输入将导致框“跳转”。在这种情况下，您希望用户输入覆盖动画滚动。

我没有解决所有的问题，但到目前为止我得到的是：http://jsfiddle.net/ptp05jvo/3/

通过在.animate()中添加以下选项，我成功地阻止了第一个问题(抽搐)。

always: function() {
    clearTimeout($Container.data('scrollTimeout'));
    isSystemScroll = false;
}

当您使用.animate()动画滚动时，jQuery滚动元素，它被认为是实际滚动，因此.scroll()事件被触发。这可能是好事/坏事。在旋转木马的情况下，这有点糟糕，因为您的.CenterToPoint()在.scroll()事件中被调用，这意味着每次jQuery将该框动画到中心时都会调用它。这就是引起抽搐问题的原因。.CenterToPoint()一直在`.scroll()事件中被调用。所以，我添加的选项将停止这种情况。

为了解决这个问题，我添加了新的jQuery函数，scrollStopped来处理滚动停止事件。

我在代码中引入了一个名为isSystemScroll的新变量。这样做的目的是识别滚动是否来自用户/动画。有了这一点，我们可以优先考虑用户的输入，以覆盖动画滚动。但是，用户输入可以是任何东西，键盘箭头、鼠标滚轮滚动、鼠标点击滚动条等等。在我的示例中，我只处理键盘箭头输入，如下代码所示：

$(document).keyup(function () {
    isSystemScroll = false;
    console.log("key up");
});

显然，您可以添加额外的检查，以只捕获左/右箭头键，而不是所有键。

这就解决了第二个问题。但您仍然需要处理其他用户输入，尤其是鼠标移动滚动条。

从测试中，我发现Firefox使动画变得更好、更流畅。在Firefox中，带有键盘箭头的用户输入将完全覆盖动画。两者之间的过渡是平稳的。然而，在Chrome中，有一点滞后/跳跃。另外，在Chrome中，水平滚动条不会出现，而在Firefox中，它会出现。

值得一提的是，Firefox并没有出现抽搐问题。我不能确定这是否是由CSS引起的。我没有修改你的CSS。

我遇到了一对旋转木马库，并做了同样的测试，看看他们是如何处理这个问题的。

Owl Carousel

http://owlgraphic.com/owlcarousel/demos/custom.html

只允许拖动输入。其他用户输入被禁用(滚动条、键盘箭头等)。然而，如果你试图拖动旋转木马(在Chrome浏览器中)，而它是动画，你会看到同样的跳变/滞后问题。同样，Firefox用这个库显示了更好更流畅的动画。

Slick

http://kenwheeler.github.io/slick/

‘自动播放’选项阻止用户输入时，旋转木马是动画。没有滚动条，您只能使用键盘箭头移动。

结论

从这个长篇大论中得出的结论是，如果你想建造自己的旋转木马，你几乎没有什么可以做的：

• 限制用户输入，只允许某些输入。
• 禁用滚动条。

或者，您可以使用现有的库。