javascript - Mootools - FX.Scroll 在触发另一个事件时不会停止

Question

我对 Javascript 不太了解，所以在我们开始之前抱歉。

我已成功使用 Mootools 1.1 滚动到元素 onclick 事件。我在这里使用 FX.Scroll 作为示例 http://demos111.mootools.net/Fx.Scroll并基本上抄袭了演示代码。

注意:如果您单击一个链接，然后快速单击另一个链接，它会立即停止移动到第一个元素并滚动到第二个元素。

我现在正在尝试使用 Mootools 1.3 为画廊使用淡入淡出效果，并使用 More Builder 来获取 FX.Scroll。它正在工作，但是当我单击一个链接，然后立即单击另一个链接时，它只会继续第一个滚动。

似乎 event.stop 不起作用。

参见示例http://www.mytimephotography.co.uk < 作品 http://www.mytimephotography.co.uk/test <损坏

我正在使用代码:

window.addEvent('domready', function () {
  var scroll = new Fx.Scroll('scrollcontainer', {
    wait: false,
    duration: 2000,
    offset: {'x': 0, 'y': 0},
    transition: Fx.Transitions.Quad.easeInOut
  })
  $('link1').addEvent ('click', function(event){
    event = new Event(event).stop();
    scroll.toElement('c1');
  })
  //etc
})

请查看网站上的任何其他源代码。

Answer 1

使用 Fx 选项对象的“link”属性。默认设置为“忽略”，这就是原始动画继续运行的原因。相反，如果您希望它在当前动画之后运行，请使用“链”，或者如果您希望它中断当前正在运行的动画，请使用“取消”。

或者，使用更快的动画 - 两秒确实很长! :)

var scroll = new Fx.Scroll('scrollcontainer', {
    wait: false,
    duration: 2000,
    offset: {'x': 0, 'y': 0},
    transition: Fx.Transitions.Quad.easeInOut,
    link: 'cancel'
});