Ergebnis 1 bis 8 von 8
  1. #1
    HTML 4 YOU ist offline Haudegen
    registriert
    23-07-2010
    Beiträge
    508

    MooTools - Event stoppen

    Hey Leute,

    ich habe mir einen MooTools Code geschrieben, der ein paar Bilder so animiert, dass sie bei einem mouseover (mouseenter) sich vergrößern und nach rechts bewegen und beim mouseout (mouseleave) sich wieder verkleinern und an die richtige Stelle bewegen. Dann hab ich es auch noch so gemacht, dass wenn man nur kurz drüber geht, dass sich das Bild dann von der aktuellen Größe wieder zurückbewegt etc. Das klappt auch alles super, nur wenn man kurzh drüber geht, dann sieht man noch kurz wie beide Scripts gleichzeitig laufen (also dass sich das Bild vergrößert und verkleinert gleichzeitig), dass will ich ändern, also das beim mouseleave bzw. mouseenter das andere Event gestoppt wird. Das bekomm ich nur iwie nicht hin. Kann mir jemand da ein bisl Hilfe geben?

    Hier mal mein Code:

    HTML Teil:
    HTML-Code:
                    <div id="alt-nav">
    
                       <img src="../images/iPhone App Icon Gr&uuml;n.png"
                            id="index"
                            style="margin-top: 20px; margin-left: 60px; height: 80px; width: 80px; position: absolute;"
                            name="20"
                        />
    
                        <img src="../images/iPhone App Icon Blau.png"
                             id="schwebebahnraetsel"
                             style="margin-top: 50px; margin-left: 60px; height: 80px; width: 80px; position: absolute;"
                        />
    
                        <img src="../images/iPhone App Icon Orange.png"
                             id="hobbys"
                             style="margin-top: 80px; margin-left: 60px; height: 80px; width: 80px; position: absolute;"
                        />
    
                        <img src="../images/iPhone App Icon Lila.png"
                             id="kontakt"
                             style="margin-top: 110px; margin-left: 60px; height: 80px; width: 80px; position: absolute;"
                        />
    
                        <h2 id="index_text" style="font-family: Arial; margin-top: 100px; margin-left: 260px; position: absolute; opacity: 0;">Startseite</h3>
                        <h2 id="kontakt_text" style="font-family: Arial; margin-top: 100px; margin-left: 260px; position: absolute; opacity: 0;">Kontakt</h2>
                        <h2 id="schwebebahnraetsel_text" style="font-family: Arial; margin-top: 100px; margin-left: 260px; position: absolute; opacity: 0;">Schwebebahnr&auml;tsel</h2>
                        <h2 id="hobbys_text" style="font-family: Arial; margin-top: 100px; margin-left: 260px; position: absolute; opacity: 0;">Hobbys</h2>
    
                    </div>

    und der JS Teil:

    PHP-Code:
    window.addEvent('domready', function() {

                var 
    alt_nav = $('alt-nav'),
                    
    apps document.getElementsByTagName('img');


                for(
    0apps.lengthi++) {
                    var 
    app      apps[i];



                    
    app.addEvents({
                        
    mouseenter: function() {

                            var 
    fx_width  = new Fx.Tween(this),
                                
    fx_height = new Fx.Tween(this),
                                
    fx_mleft  = new Fx.Tween(this),
                                
    fx_text   = new Fx.Tween($(this.id '_text'), {
                                    
    'duration'300
                                
    });


                            
    fx_text.start('opacity'01);
                            
    fx_width.start('width'this.style.width'100');
                            
    fx_height.start('height'this.style.height'100');
                            
    fx_mleft.start('margin-left'this.style.marginLeft'100');


                        },

                        
    mouseleave: function() {
                            var 
    fx_width  = new Fx.Tween(this),
                                
    fx_height = new Fx.Tween(this),
                                
    fx_mleft  = new Fx.Tween(this),
                                
    fx_text   = new Fx.Tween($(this.id '_text'), {
                                    
    'duration'300
                                
    });


                            
    fx_text.start('opacity'10);
                            
    fx_width.start('width'this.style.width'80');
                            
    fx_height.start('height'this.style.height'80');
                            
    fx_mleft.start('margin-left'this.style.marginLeft'60');
                        },

                        
    click: function() {
                            
    weiterleiten('http://localhost/Homepage/m-remy.de%20s/Original/html/?page=' this.id);
                        }
                    });


                }



            }); 

  2. #2
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: MooTools - Event stoppen

    Das Event wirst du wahrscheinlich nicht zum stoppen bewegen, vielmehr aber die Animationen. Du musst sie nur in einer, für beide Eventhandler zugreifbaren Scope speichern und mit cancel beenden.

  3. #3
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: MooTools - Event stoppen


  4. #4
    HTML 4 YOU ist offline Haudegen
    registriert
    23-07-2010
    Beiträge
    508

    AW: MooTools - Event stoppen

    Jetzt funktioniert der Code nicht mehr.

    PHP-Code:
    window.addEvent('domready', function() {

                var 
    alt_nav = $('alt-nav'),
                    
    apps document.getElementsByTagName('img');


                for(
    0apps.lengthi++) {
                    var 
    app apps[i];

                    
    app.addEvents({
                        
    mouseenter: function() {

                            
    fx_width.cancel();
                            
    fx_height.cancel();
                            
    fx_mleft.cancel();
                            
    fx_text.cancel();

                            var 
    fx_width  = new Fx.Tween(this),
                                
    fx_height = new Fx.Tween(this),
                                
    fx_mleft  = new Fx.Tween(this),
                                
    fx_text   = new Fx.Tween($(this.id '_text'), {
                                    
    'duration'300
                                
    });


                            
    fx_text.start('opacity'01);
                            
    fx_width.start('width'this.style.width'100');
                            
    fx_height.start('height'this.style.height'100');
                            
    fx_mleft.start('margin-left'this.style.marginLeft'100');


                        },

                        
    mouseleave: function() {

                            
    fx_width.cancel();
                            
    fx_height.cancel();
                            
    fx_mleft.cancel();
                            
    fx_text.cancel();

                            var 
    fx_width  = new Fx.Tween(this),
                                
    fx_height = new Fx.Tween(this),
                                
    fx_mleft  = new Fx.Tween(this),
                                
    fx_text   = new Fx.Tween($(this.id '_text'), {
                                    
    'duration'300
                                
    });


                            
    fx_text.start('opacity'10);
                            
    fx_width.start('width'this.style.width'80');
                            
    fx_height.start('height'this.style.height'80');
                            
    fx_mleft.start('margin-left'this.style.marginLeft'60');
                        },

                        
    click: function() {
                            
    weiterleiten('http://localhost/Homepage/m-remy.de%20s/Original/html/?page=' this.id);
                        }
                    });


                }



            }); 

    Was mache ich falsch?

  5. #5
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: MooTools - Event stoppen

    Zitat Zitat von Junkee[] Beitrag anzeigen
    [... ]für beide Eventhandler zugreifbaren Scope speichern[...]
    ansonsten http://forum.jswelt.de/javascript-fa...erkonsole.html (Wo finde ich die Fehlerkonsole?)

  6. #6
    HTML 4 YOU ist offline Haudegen
    registriert
    23-07-2010
    Beiträge
    508

    AW: MooTools - Event stoppen

    sry, hab den falschen code oben gepostet, hab es mit ner globalen Variable schon ausprobiert, klappt aber net.
    Hab mir die Fehlerkonsole vorher net angeguckt, weil es eigentlich keine Fehler in MooTools Bereichen anzeigt, jetzt steht da aber fx_width.cancel is not a function... komisch... weisst du ne Lösung?

    Hier nochmal der Code mit der globalen Variable:

    PHP-Code:
    window.addEvent('domready', function() {

                var 
    alt_nav = $('alt-nav'),
                    
    apps document.getElementsByTagName('img'),
                    
    fx_width  0,
                    
    fx_height 0,
                    
    fx_mleft  0,
                    
    fx_text   0;



                for(
    0apps.lengthi++) {
                    var 
    app apps[i];

                    
    app.addEvents({
                        
    mouseenter: function() {

                            
    fx_width.cancel();
                            
    fx_height.cancel();
                            
    fx_mleft.cancel();
                            
    fx_text.cancel();

                            
    /*var*/ fx_width  = new Fx.Tween(this);
                                
    fx_height = new Fx.Tween(this);
                                
    fx_mleft  = new Fx.Tween(this);
                                
    fx_text   = new Fx.Tween($(this.id '_text'), {
                                    
    'duration'300
                                
    });


                            
    fx_text.start('opacity'01);
                            
    fx_width.start('width'this.style.width'100');
                            
    fx_height.start('height'this.style.height'100');
                            
    fx_mleft.start('margin-left'this.style.marginLeft'100');


                        },

                        
    mouseleave: function() {

                            
    fx_width.cancel();
                            
    fx_height.cancel();
                            
    fx_mleft.cancel();
                            
    fx_text.cancel();

                            
    /*var*/ fx_width  = new Fx.Tween(this);
                                
    fx_height = new Fx.Tween(this);
                                
    fx_mleft  = new Fx.Tween(this);
                                
    fx_text   = new Fx.Tween($(this.id '_text'), {
                                    
    'duration'300
                                
    });


                            
    fx_text.start('opacity'10);
                            
    fx_width.start('width'this.style.width'80');
                            
    fx_height.start('height'this.style.height'80');
                            
    fx_mleft.start('margin-left'this.style.marginLeft'60');
                        },

                        
    click: function() {
                            
    weiterleiten('http://localhost/Homepage/m-remy.de%20s/Original/html/?page=' this.id);
                        }
                    });


                }



            }); 

  7. #7
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: MooTools - Event stoppen

    Code:
    if(fx_width != 0)
      fx_width.cancel();
    usw.

  8. #8
    HTML 4 YOU ist offline Haudegen
    registriert
    23-07-2010
    Beiträge
    508

    AW: MooTools - Event stoppen

    danke funktioniert alles wunderbar!

Ähnliche Themen

  1. Mal wieder Event richtig stoppen
    Von Crashdown im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 05-07-2010, 01:07
  2. Mootools - Drag and Drop + click Event
    Von Lo3ty im Forum JavaScript
    Antworten: 17
    Letzter Beitrag: 19-02-2010, 14:45
  3. JS Konflikt zwischen mootools und mootools!!?!
    Von marsteini im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 04-04-2009, 16:03
  4. MooTools Event-frage
    Von emse im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 23-03-2009, 21:00
  5. Antworten: 7
    Letzter Beitrag: 25-08-2007, 20:18

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •