1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

JS Effekte

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von mschoening, 16.08.07.

  1. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    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?
     
  2. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Schon geschafft...
     
  3. Nathea

    Nathea Admin
    AT Administration

    Dabei seit:
    29.08.04
    Beiträge:
    13.563
    Und? Wie?
     
  4. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Code:
    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.
     
    Nathea gefällt das.

Diese Seite empfehlen