Frage zu Mootools tween

Hallo,

ich habe ein Div was ich auf einer Seite von oben nach unten einfahren lasse, das funktioniert auch sehr schön.
Wie kann ich zusätzlich die Deckkraft (opacity) verändern?

Gruß kleppi

Code:

---

myElement = $('mb_popup')
myElement.set('tween', {
                duration: '5000',
                transition: 'bounce:out'
        });
 
myElement.tween('margin-top',200);

---

in der dazugehörigen CSS-Datei.

Hallo dackelchen,

ich setze in der CSS "opacty:0.1" und möchte gleichzeitig mit dem einfahren des DIV die Deckkraft erhöhen.

Gruß kleppi

HTML-Code:

---

myElement = $('mb_popup');
   
var effekt = new Fx.Tween(myElement, {
    duration: 5000,
    transition: 'bounce:out'
});
   
var effekt2 = Object.clone(effekt);

effekt.start('margin-top', 200);
effekt2.start('opacity', 1);

​

---

Demo: http://jsfiddle.net/ZtcA6/10/

Ob es auch mit einem Fx.Tween Element geht weiß ich nicht :-(

Nimm einfach statt tween morph
http://mootools.net/docs/core/Fx/Fx.Morph

Richtig, mit Fx.Tween "animierst" du eine CSS-Eigenschaft, mit Fx.Morph mehrere.

Also so in der Art:

Code:

---

myElement = $('mb_popup');
myElement.set('morph', {
                duration: '5000',
                transition: 'bounce:out'
        });
 
myElement.morph({margin-top: 200, opacity: 1});

---

Hallo alle,

vielen Dank erst einmal für die Bemühungen.

Die Lösungen von psren und auch von MartinG funktionieren bei FF, Opera und Chrom super.
Der IE7 hat natürlich Probleme damit, er führt auch alles aus, setzt aber am Ende die Deckkraft wieder zurück.



Gruß kleppi

Vielleicht funktioniert es, wenn du nach dem Ende der "Animation" noch einmal explizit die Opacity auf 1 setzt:

Code:

---

myElement = $('mb_popup');
myElement.set('morph', {
        duration: '5000',
        transition: 'bounce:out',
        onComplete: function() {
                this.element.setStyle('opacity', '1');
        }
});
 
myElement.morph({margin-top: 200, opacity: 1});

---

PS: warum noch den IE 7 unterstützen?

das funktioniert nicht.
Aber du hast recht mit dem IE7!


tschüß kleppi

Ins blaue geraten: Unterstützt der IE7 opacity schon? oder muss man da noch den alpha-Filter nutzen?

der IE7 unterstützt durch mootools das opacity, das sehe ich wenn das DIV einfährt.
Sobald das DIV zum stehen kommt, geht opacity wohl wieder auf den Wert zurück der im CSS steht.

Zitat:

---

Turns out that IE requires an element to be positioned in order for filter/opacity to work. If your element doesn’t have a position you can work around this by adding ‘zoom: 1‘ to your CSS.

---

http://joseph.randomnetworks.com/200...t-explorer-ie/

Hallo psren,

danke für deinen Hinweis, aber es funktioniert nicht.
Ich habe das opacity rausgenommen, das sieht auch so gut aus.
Denn die meisten Besucher auf meiner Seite benutzen immer noch den IE7.

Gruß kleppi

Hast du mal einen Link, dass man sich das Live anschauen kann?

ich habe noch ein bißchen getestet, jetzt funktioniert es.
Ich habe aus dem CSS das opacity entfernt und habe vor dem morph
die Anweisung "myElement.setStyle('opacity','0')" gesetzt.

Hier ist der Link www.joggen-in-nrw.de

Code:

---

myElement = $('mb_popup');
myElement.set('morph', {
                duration: '5000',
                transition: 'bounce:out'
                //transition: Fx.Transitions.Bounce.easeOut
        });
myElement.setStyle('opacity', '0');
myElement.morph({'margin-top': 200, 'opacity': 1});

---

ich habe noch einige Wavesound-Dateien, wäre schön wenn noch ein Sound erklingen könnte wenn das DIV einfährt.
Weiß jemand wie das geht?

Gruß kleppi

Zitat:

---

Zitat von kleppi

ich habe noch einige Wavesound-Dateien, wäre schön wenn noch ein Sound erklingen könnte wenn das DIV einfährt.

---

Sowas macht man nicht :-)