Samuel
Erfahrenes Mitglied
Ich habe ein Problem mit S2.FX.Parallel, dazu habe ich eine Beispiel hochgeladen das hier gefunden werden kann: http://www.groovehazard.org/accordion
Fährt man mit der Maus über ein einzelnes Bild und lässt die Animation auslaufen laufen alle 4 Effekte parallel, will ich aber einen zweiten Effekt starten bevor der vorherige Effekt beendet ist will ich den aktuellen Effekt zuerst beenden und dann erst den nächsten erstellen und starten.
Dies funktioniert in der praxis leider nicht so wie ich mir das vorstelle.
Ich würde mich über einen Tipp in die richtige Richtung freuen,
lg Sam
Fährt man mit der Maus über ein einzelnes Bild und lässt die Animation auslaufen laufen alle 4 Effekte parallel, will ich aber einen zweiten Effekt starten bevor der vorherige Effekt beendet ist will ich den aktuellen Effekt zuerst beenden und dann erst den nächsten erstellen und starten.
Dies funktioniert in der praxis leider nicht so wie ich mir das vorstelle.
Ich würde mich über einen Tipp in die richtige Richtung freuen,
lg Sam
PHP:
var maTeaserAccordion = Class.create({
// defaultoptions
options: {
closedWidth:105,
openedWidth:330
},
initialize: function(element, options) {
//expand options
Object.extend(this.options, options);
// set rootelement
this.element = element;
// append classname to container
this.element.addClassName('maTeaserAccordion');
// create container-element
this.container = new Element('div', {
'class':'slice-container'
});
// set slices
this.slices = this.element.childElements();
// remove slices from current position
// and insert slices into container
this.slices.invoke('remove').each(function(item) {
this.container.insert(item);
}.bind(this));
// insert container into root-element
this.element.insert(this.container);
// append observer to slices
this.element.down('.slice-container').childElements().each(function(item) {
item.observe('mouseover', this.mouseover.bind(this));
}.bind(this));
// simulate mouseover-event for a randomed slice
this.slices[Math.floor(Math.random() * this.slices.length)].triggerEvent('mouseover');
},
mouseover: function(event) {
// check if there is currently any running morphing
if((this.morphing != undefined && this.morphing.state != 'finished')) {
//cancel current morphing
this.morphing.cancel();
}
// create new morphings
var arrMorphings = [];
this.slices.each(function(item, index) {
var strStyle = 'width:' + ((item == event.currentTarget) ? this.options.openedWidth : this.options.closedWidth) + 'px';
arrMorphings.push(new S2.FX.Morph(item, {
delay:0,
duration:1,
position:'parallel',
style: strStyle
}));
}.bind(this));
// setup S2.FX.Parallel
this.morphing = new S2.FX.Parallel(arrMorphings, {
duration:1
});
// start morphing
this.morphing.play();
}
});
Element.addMethods('DIV', {
maTeaserAccordion: function(element, options) {
var maVid = new maTeaserAccordion(element, options || {});
}
});
Element.prototype.triggerEvent = function(eventName) {
if(document.createEvent) {
var evt = document.createEvent('HTMLEvents');
evt.initEvent(eventName, true, true);
return this.dispatchEvent(evt);
}
if(this.fireEvent)
return this.fireEvent('on' + eventName);
}