Mootools - FX.Scroll не остановится при запуске другого события - PullRequest
Новая
       28

Mootools - FX.Scroll не остановится при запуске другого события

0 голосов
/ 16 декабря 2010

Я не очень хорошо понимаю Javascript, поэтому прошу прощения, прежде чем мы начнем.

Я успешно использовал Mootools 1.1 для прокрутки элементов на событиях клика. Я использовал 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 <сломан </p>

Я использую код: 

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
})

Пожалуйста, просмотрите любой другой исходный код на сайте.

1 Ответ

3 голосов
/ 16 декабря 2010

Используйте свойство "link" объекта опций Fx. По умолчанию установлено значение «игнорировать», поэтому исходная анимация продолжает работать. Вместо этого используйте «цепочку», если хотите, чтобы она запускалась после текущей анимации, или «отмена», если хотите, чтобы она прерывала текущую анимацию.

Альтернативно, используйте более быструю анимацию - две секунды действительно длинны! :) 

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