Question

我已经测试了scrollTo（）插件，但我需要一种方法来停止滚动动画，所以我正在查看serialScroll（）。

这是我在scrollTo中使用的内容：

$('#scroller').scrollTo('1000px', 3000);

我的问题是，如何使用serialScroll做同样的事情？我不能像scrollTo那样让它工作，这不是它想要做的，只是添加了大量的额外选项？！

Answer 1

由于SerialScroll绑定了多个事件（包含stop事件），您可以使用toggle根据点击次数开始/停止滚动：

// setup serialScroll to scroll the images in the 'serialScroll-test' div along
// the y-axis.
$('#serialScroll-test').serialScroll({items: 'img', duration: 2000, axis: 'y', interval: 1, force: true});
// since we used the "force: true" option to auto-start the animation we use
// "stop" as the first function to toggle and "start" second.
$('#serialScroll-test').toggle(function(){ 
  $('#serialScroll-test').trigger('stop.serialScroll'); 
}, function() { 
  $('#serialScroll-test').trigger('start.serialScroll'); 
});

在以下HTML上：

  <div id="serialScroll-test" style="float: left; width: 600px; height: 333px; overflow: hidden;"> 
    <img class="scrollable" src="http://farm4.static.flickr.com/3489/3849497254_4722754872.jpg" alt="IMG_7997" /> 
    <img class="scrollable" src="http://farm3.static.flickr.com/2487/3867263002_f6b368d983.jpg" alt="IMG_8005" /> 
    <img class="scrollable" src="http://farm3.static.flickr.com/2528/4043006363_81931d7985.jpg" alt="IMG_2235" /> 
  </div>

Example（edit the source）

note ：当调用stop事件时，动画会在滚动到的项目上停止，而不是立即停止。因此，如果您在滚动到第二个图像时单击第一个图像，则动画将继续，直到第二个图像处于视图中然后停止。这也意味着当使用cycle: true（默认值）时，如果在返回第一个图像期间单击，动画将继续，直到第一个图像在视图中然后停止。

修改：

在看了一下之后，我在Ariel Flesler的博客上发现了this post（插件作者）。在片段部分中，包含有关如何在悬停时停止动画的脚本。它包括一个注释：

// You can temove the .stop() to let it finish the active animation ... $(this).stop().trigger('stop'); ...

请注意触发器中的其他stop()。根据我上面发布的代码，您可以将toggle()功能更改为：

$('#serialScroll-test').toggle(function(){ $('#serialScroll-test').stop().trigger('stop.serialScroll'); }, function() { $('#serialScroll-test').stop().trigger('start.serialScroll'); });

产生所需的效果。 Updated example here（edit it）

jQuery - ScrollTo和Serial Scroll不能一起工作

1 个答案: