Mootools - FX.Scroll wird nicht aufhören, wenn ein anderes Ereignis ausgelöst wird

Question

Ich habe nicht ein sehr gutes Verständnis von Javascript, also Appologien, bevor wir anfangen.

Ich habe erfolgreich Mootools 1.1 verwendet, um zu Elementen onclick Ereignisse zu scrollen. Ich habe FX.Scroll als Beispiel hier http://demos111.mootools.net/Fx.Scroll verwendet und grundsätzlich den Democode abgerissen.

Hinweis: Wenn Sie auf einen Link und dann auf einen anderen schnell klicken, wird sofort auf das erste Element und auf den zweiten umgestellt.

Ich versuche jetzt, Mootools 1.3 zu verwenden, um die Fade Effects für eine Galerie zu verwenden, und habe mehr Generator verwendet, um FX.Scroll zu erhalten. Es funktioniert, ABER wenn ich auf einen Link und dann auf einen anderen klicke, geht es einfach weiter mit dem ersten Scroll.

Es scheint, dass event.stop nicht funktioniert.

Siehe Beispiel http://www.mytimephotography.co.uk < arbeitet http://www.mytimephotography.co.uk/test <

gebrochen

I-Code verwenden:

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

Sehen Sie bitte andere Quellcode auf der Website.

Answer 1

Verwenden Sie die Eigenschaft "link" des Objekts Fx options. Der Standardwert ist auf "Ignorieren" eingestellt, weshalb die ursprüngliche Animation weiterhin ausgeführt wird. Verwenden Sie stattdessen "chain", wenn Sie möchten, dass es nach der aktuellen Animation ausgeführt wird, oder "cancel", wenn Sie möchten, dass die laufende Animation unterbrochen wird.

Verwenden Sie alternativ eine schnellere Animation-zwei Sekunden ist wirklich lang! :)

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