Mootools Fx Problem

FaFoo

Hi,

http://www.pctrading.de/enastar/

Es geht um den Effekt im Menü. Wenn man zu schnell mit der Maus über die Menüpunkte fährt, ist die Animation abgehackt und zitterig.

Hat jemand eine Ahnung wie man das akzeptabel unterbinden kann?

PHP

window.addEvent('domready', function() {
    // Item 1
    $('item1').addEvent('mouseenter', function(event){
        myEffect = new Fx.Morph('sub1', {link: 'cancel', duration: 200, transition: Fx.Transitions.Expo.easeIn});


        myEffect.start({
            'height'        : [0, 50],
            'margin-top'    : [0,-50]
        });

    });

    $('item1').addEvent('mouseleave', function(event){
        myEffect = new Fx.Morph('sub1', {link: 'cancel', duration: 200, transition: Fx.Transitions.Expo.easeIn});

        myEffect.start({
            'height'        : [50, 0],
            'margin-top'    : [-50,0]
        });
    });
...

Alles anzeigen

HTML

<div id="menu">
    <div id ="item1" class="item">
        <a href="#unternehmen" class="title">Unternehmen</a>
        <a href="?c=2" class="link">Unternehmensziele</a>
        <a href="?c=3" class="link">Unternehmensführung</a>
    </div>
...
</div>

Grevas

Sry, da kann ICH dir nicht helfen, aber ich geb dir trotzdem eine kleine Anmerkung bei solchen scripten...

Mehr sorgen würd ich mir nämlich über die Fehler die dabei entstehen machen. Wenn man schnell von unten nach oben fährt z.B. realisiert das Script nicht mehr was los ist und das Menü steckt in einer Schleife - wird instant aus- und reingefahren. Ist irgendwo ein Kompromiss... Probleme akzeptieren die man nicht lösen kann oder so ein Effekt verwerfen?

/P.S. ich glaube nachm 2ten lesen von deinem post - meinst du genau das xD nja bis auf flash als alternative fällt mir nichts ein um die uhrzeit. Meineswissens nach, gibt es immer Probleme bei Javascript mouseover effekten die eine Dauer haben.

FaFoo

Ne, habs auch schon stabiler gesehen... Die Option link: 'cancel' sollte das auch eigentlich verhindern. Geht nur nicht.

schönes Beispiel: http://www.mhh-solartechnik.de basiert aber nicht auf mootools...

Grevas

Momentan... Denk ich an... Egal, zurück zu deinem Script.

Bei der Seite die du da jetzt als Beispiel nennst, ist das aber ne ganz andere Geschichte. Bei dir bewegt sich der Hoverauslöser mit - wenn man zu schnell drüberfährt, fährt dein auslöser hoch gegen die maus und fängt immer wieder von vorne an. Versuchs mal mit einer Bedingung, fals die Startvariable gesetzt wurde, dass die Animation nicht nochmal starten kann - bis sie eben wieder geschlossen wurde.

Sprich...
Hover: function1 GO
MouseOut: function2 GO <- function 1 ist aber noch nicht durch, also wird es nicht sofort wieder geschlossen sooondern erst noch der durchlauf bei f1 - dabei allerdings trifft der Auslöser wieder gegen die Maus - funktion 2 wurde bereits aufgerufen, also muss sie auch noch zu ende laufen - dann wieder 1 und schon hast du eine schicke endlosschleife hoffentlich hilft dir das was.

//vom Prinzip her die Lösung die ich mir vorstelle:

beim Start $opening = true, erst sobald das menü ganz offen ist auf false, bei mouseover $closing = true setzen, aber nicht durchführen fals $opening true ist. Fals $closing = true, im opening sobald fertig die close funktion aufrufen.

FaFoo

Ne das funktioniert nicht soweit ich weiß, auch schon alles mögliche ausprobiert. Ich schau mal bei Mootools selbst im Forum oder so...
Aber trotzdem Danke!

#matthias

Also entwerder meine Augen sind auch nicht mehr das was sie mal waren oder es liegt woanders dran.
Ich kann keiner Fehler in der Animation sehen, zumindstens unter Opera nicht.
Bei mir gibt es kein Hackeln und kein Ruckeln.
Es geht doch um das Menu ob, das sich aufklappt wen man mit der Maus drüber fährt?

MFG Matthias

Tags