JS Effekte

[mschoening]

Hi,
ich bastel gerade an eine Seite und möchte einen Mootools FX einbauen. Es handelt sich um diesen hier. Ich will aber, dass der genauso aussieht wie der auf der www.mootools.net "homepage". Wenn man genau hinschaut merkt man, dass der FX in der "demo" einen kleinen "ease" hat. Also das Element wird kurz grösser als gewollt und ist dann erst so gross wie angegeben. Auf der Mootools "homepage" ist dies nicht der Fall. Da vergrössert sich das Element nur auf die gewünschte Grösse...hat jemand eine Idee wie ich das auch hinbeommen kann?

 

[mschoening]

Schon geschafft...

 

[Nathea]

Und? Wie?

 

[mschoening]

var szNormal = 117, szSmall  = 100, szFull   = 219;
 
var kwicks = $$("#kwicks .kwick");
var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.[COLOR=Red]Back[/COLOR].easeOut});
kwicks.each(function(kwick, i) {
    kwick.addEvent("mouseenter", function(event) {
        var o = {};
        o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
        kwicks.each(function(other, j) {
            if(i != j) {
                var w = other.getStyle("width").toInt();
                if(w != szSmall) o[j] = {width: [w, szSmall]};
            }
        });
        fx.start(o);
    });
});
 
$("kwicks").addEvent("mouseleave", function(event) {
    var o = {};
    kwicks.each(function(kwick, i) {
        o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
    });
    fx.start(o);
})

Das markierte Element (ROT) durch "Expo" ersetzen.