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

PHP-Code:

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