[Erledigt] jQuery animate step: aktuellen step und delay festlegen

BlackScorp · 05.07.2010, 10:49

Hallo leute,

wie es schon im titel steht. will ich gerne bei der eigenschaft step: den aktuellen step herausfinden und ein delay zwischen den einzelnen steps festlegen. ich möchte während ein div animiert wird, bei einem anderen div die css klasse ändern.
mein aktueller versuch ist folgender:

Code:

 i = 1;
    $('.animiertesDiv').animate({
        "left":"+=10",
        "top":"+=10"
    },{
        duration: 'slow',
        step:function(){
            //hier soll das div, alte klasse verlieren und eine neue klasse erhalten
            $('.anderesdiv').attr('class','neue_class_'+i);
            // da duration  slow 600 ms dauert, wollte ich 100 ms pause machen
            i++;
        }
        ,
        complete: function(){
            afterAnimation();
        }
    });

hoffe ihr könnt mir weiterhelfen, ich kann zwar in step , eine variable als parameter übergeben, jedoch stehen dort die werte für top und left, anfang und ende. ich brauch aber einen step index und irgendwie eine pause zwischen den steps festlegen

MFG BlackScorp

rudygotya · 05.07.2010, 13:17

Schreib dir das als singleton, dann brauchst du auch kein globales i. Dann kannst du auch einfach bestimmen, ob schon ein Animiervorgang stattfindet und dementsprechend über complete die Instanzvariable zurücksetzen, die den Aufruf blockiert.

grüße

BlackScorp · 05.07.2010, 13:40

naja es ist kein globales i, dieser codeausschnitt befindet sich in einer funktion. es geht da auch nicht um die anzahl der steps, sondern wann die steps ausgeführt werden, in welchen intervall. ich könnte i nach ablauf auf 0 setzen oder so. aber danach kommt halt das problem, dass die hauptanimation noch weiterlauft und die animation des anderen divs, ist schon längst vorbei. es müsste doch irgendwie möglich sein , da ein settimeout reinsetzen von 100 ms zwischen den einzelnen steps...

rudygotya · 05.07.2010, 13:48

PHP-Code:

  (function loopsiloopsiloo) () {
    machIrgendWasTolles();
    // auf jeden fall nach der Ausführung der Funktion machIrgendWasTolles()
    setTimeout(loopsiloopsiloo(), 100);
}();

Ist praktisch ein setInterval, dass auf die ausführende Funktion wartet und sich selbst startet.

Zitat:

aber danach kommt halt das problem, dass die hauptanimation noch weiterlauft und die animation des anderen divs, ist schon längst vorbei.

Solltest du vielleicht so erklären, dass ichs auch kapier, wo das Problem liegt

Sorry, aber ich check nicht, worauf du hinauswillst oder wo jetzt der Hund begraben ist. Evtl hilft dir ja das "Pattern"

BlackScorp · 05.07.2010, 13:55

ok dann "zeige" ich es am besten , was ich vorhabe, du siehst da in meiner signatur, link zu meinem spiel, log dich da mal ein username:testuser, pw:123 und dann lauf mal auf der karte herum, du wirst sehen, dass die figur , viel zu schnell mit den beinen "strampelt" , wenn ich das nun verlangsamen könnte, würde es besser aussehen..

habs gerade mit deinem settimeout ausprobiert und firebug spuckt folgende meldung aus:

too much recursion

EDIT: habs gerade so versucht:

Code:

  i = 1;
    $('div#char').attr('class','char player_'+direction);
    $('div#mapScreen div.mapDisplay').animate({
        "left":left,
        "top":top
    },{
        duration: 600,
        step:function (){
            function animateChar(){
                $("div#char").attr("class","char player_walk"+i+"_"+direction);
                //if(i>6)i=1; else i++;
                i++;
                setTimeout(animateChar(),100);
            }
            
        }
        ,
       
        complete: function(){
             
             
            
            afterAnimation();
            $('div#char').attr('class','char player_'+direction);
        }
    });

keine fehlermeldung .. aber auch keine animation

rudygotya · 05.07.2010, 14:54

Gerade für dein animateMap bietet sich doch ein Singleton an. Schau dir mal das Monster an:

PHP-Code:

  function animateMap(direction){
    var left = "";
    var top = "";
    var mapHeight = 9;
    var mapWidth = 9;
    var tileWidth = 64;
    var tileHeight = 32;
    var mapX = 0;
    var mapY = 0;
    var mapTop = 0;
    var mapLeft = 0;
    var diagonale = calcRadius();
    var i = 0;
    var afterAnimation;
    switch(direction){
        case 'n':{
            left = "+=32";
            top = "+=16";
            //Reihe Oben erstellen
            mapX = (parseInt($('span.x').html())-(diagonale));
            mapY = parseInt($('span.y').html());
            mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)-(Math.round(tileHeight/2)));
            mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)-(Math.round(tileWidth/2)));
            mapX--;
            for(i = 0;i<mapWidth;i++){
                $('div#mapScreen div.mapDisplay').append(
                    '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>'
                    );
                mapX++;
                mapY--;
                mapLeft +=tileWidth;
            }

            //Reihe links erstellen
            mapX = parseInt($('span.x').html());
            mapY = (parseInt($('span.y').html())+(diagonale));
            mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)+(Math.round(tileHeight/2)));
            mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)-(Math.round(tileWidth/2)));
            mapY++;
            for(i = 0;i < mapHeight-1;i++){
                $('div#mapScreen div.mapDisplay').append(
                    '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>'
                    );
                mapX--;
                mapY--;
                mapTop -= tileHeight;
            }
            
            _afterAnimation = function(){
                //Reihe unten Entfernen
                mapX = parseInt($('span.x').html())+(diagonale);
                mapY = parseInt($('span.y').html());
                mapX++;
                mapY++;
          
                for(i = 0;i<mapWidth;i++){
                    $('div#X'+mapX+'Y'+mapY).remove();
                    mapX--;
                    mapY++;
                }
                //Reihe rechts Entfernen
                mapX = parseInt($('span.x').html());
                mapY = parseInt($('span.y').html())-(diagonale);
                mapY--;
                mapX++;
                for(i = 0;i<mapHeight;i++){
                    $('div#X'+mapX+'Y'+mapY).remove();
                    mapX++;
                    mapY++;
                }
            }
            break;

        }
        case 's':{
            left = "-=32";
            top = "-=16";
            //Reihe Rechts erstellen
            mapX = parseInt($('span.x').html());
            mapY = parseInt($('span.y').html())-(diagonale);
            mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)-(Math.round(tileHeight/2)));
            mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)+(Math.round(tileWidth/2)));
            mapY--;

            for(i = 0;i < mapHeight;i++){
                $('div#mapScreen div.mapDisplay').append(
                    '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>'
                    );
                mapX++;
                mapY++;
                mapTop += tileHeight;
            }
           
            //Reihe Unten erstellen
            mapX = (parseInt($('span.x').html())+(diagonale));
            mapY = parseInt($('span.y').html());
            mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)+(Math.round(tileHeight/2)));
            mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)-(Math.round(tileWidth/2)));
            mapY++;
            for(i = 0;i<mapWidth-1;i++){
                $('div#mapScreen div.mapDisplay').append(
                    '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>'
                    );
                mapLeft -= tileWidth;
                mapX--;
                mapY++;
            }

            afterAnimation = function(){
                //Reihe links Entfernen
                mapX = parseInt($('span.x').html());
                mapY = parseInt($('span.y').html())+(diagonale);
                mapY++;
                mapX--;
                for(i = 0;i<mapHeight;i++){
                    $('div#X'+mapX+'Y'+mapY).remove();
                    mapX--;
                    mapY--;
                }

                //Reihe oben Entfernen
                mapX = parseInt($('span.x').html())-(diagonale);
                mapY = parseInt($('span.y').html());
                mapX--;
                mapY--;
         
                for(i = 0;i<mapWidth;i++){
                    $('div#X'+mapX+'Y'+mapY).remove();
                    mapX++;
                    mapY--;
                }
            }
            break;
        }
        case 'w':{
            left = "+=32";
            top = "-=16";
            //Reihe links erstellen
            mapX = parseInt($('span.x').html());
            mapY = (parseInt($('span.y').html())+(diagonale));
            mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)+(Math.round(tileHeight/2)));
            mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)-(Math.round(tileWidth/2)));
            mapY++;
            for(i = 0;i < mapHeight;i++){
                $('div#mapScreen div.mapDisplay').append(
                    '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>'
                    );
                mapX--;
                mapY--;
                mapTop -= tileHeight;
            }
            
            //Reihe Unten erstellen
            mapX = (parseInt($('span.x').html())+(diagonale));
            mapY = parseInt($('span.y').html());
            mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)+(Math.round(tileHeight/2)));
            mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)+(Math.round(tileWidth/2)));
            mapX++;

            for(i = 0;i<mapWidth-1;i++){
                $('div#mapScreen div.mapDisplay').append(
                    '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>'
                    );
                mapLeft -= tileWidth;
                mapX--;
                mapY++;
            }
            afterAnimation = function(){
                //Reihe oben Entfernen
                mapX = parseInt($('span.x').html())-(diagonale);
                mapY = parseInt($('span.y').html());
                mapX--;
                mapY--;
       
                for(i = 0;i<mapWidth;i++){
                    $('div#X'+mapX+'Y'+mapY).remove();
                    mapX++;
                    mapY--;
                }
                //Reihe rechts Entfernen
                mapX = parseInt($('span.x').html());
                mapY = parseInt($('span.y').html())-(diagonale);
                mapY--;
                mapX++;
                for(i = 0;i<mapHeight;i++){
                    $('div#X'+mapX+'Y'+mapY).remove();
                    mapX++;
                    mapY++;
                }
            }
            break;
        }
        case 'e':{
            left = "-=32";
            top = "+=16";
           
            //Reihe Oben erstellen
            mapX = (parseInt($('span.x').html())-(diagonale));
            mapY = parseInt($('span.y').html());
            mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)-(Math.round(tileHeight/2)));
            mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)-(Math.round(tileWidth/2)));
            mapX--;
            for(i = 0;i<mapWidth;i++){
                $('div#mapScreen div.mapDisplay').append(
                    '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>'
                    );
                mapX++;
                mapY--;
                mapLeft +=tileWidth;
            }
            //Reihe rechts erstellen
            mapX = parseInt($('span.x').html());
            mapY = (parseInt($('span.y').html())-(diagonale));
            mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)+(Math.round(tileHeight/2)));
            mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)+(Math.round(tileWidth/2)));
            mapX++;
            for(i = 0;i < mapHeight-1;i++){
                $('div#mapScreen div.mapDisplay').append(
                    '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>'
                    );
                mapX++;
                mapY++;
                mapTop += tileHeight;
            }
            afterAnimation = function(){
                //Reihe unten Entfernen
                mapX = parseInt($('span.x').html())+(diagonale);
                mapY = parseInt($('span.y').html());
                mapX++;
                mapY++;
               
                for(i = 0;i<mapWidth;i++){
                    $('div#X'+mapX+'Y'+mapY).remove();
                    mapX--;
                    mapY++;
                }
                //Reihe links Entfernen
                mapX = parseInt($('span.x').html());
                mapY = parseInt($('span.y').html())+(diagonale);
                mapY++;
                mapX--;
                for(i = 0;i<mapHeight;i++){
                    $('div#X'+mapX+'Y'+mapY).remove();
                    mapX--;
                    mapY--;
                }
            }
            break;
        }
    }
  
    i = 1;
     $('div#char').attr('class','char player_'+direction);
    $('div#mapScreen div.mapDisplay').animate({
        "left":left,
        "top":top
    },{
        duration: 'slow',
        step:function(){
            $('div#char').attr('class','char player_walk'+i+'_'+direction);
            i++;
            if(i > 6) i = 1;
        }
        ,
        complete: function(){
             $('div#char').attr('class','char player_'+direction);
            afterAnimation();
        }
    }); 
}

Wenn du genauer hinsiehst, fällt dir auf, dass in jedem case statement afterAnimation deklariert wird. Abstrahier das doch mal.

Nur als Ansatz:

PHP-Code:

  var animateMap = (function () {
    var left="",
        top="",
        mapHeight=9,
        mapWidth=9,
        tileWidth=64,
        tileHeight=32,
        mapX=0,
        mapY=0,
        mapTop=0,
        mapLeft=0,
        diagonale=calcRadius(),
        i=0,
        afterAnimation = function () {
            // tu irgendwas
        },
        _runThis = function () {
            // tu irgendwas
        };
    direction
    return {
        run : function (direction) {
            switch(direction){
                case 'n' : {
                    _runThis(direction);
                    _afterAnimation();
                }
                case 's' : {
                    _runThis(direction);
                    _afterAnimation();
                }
                case 'w' : {
                    _runThis(direction);
                    _afterAnimation();
                }
                case 'e': {
                    _runThis(direction);
                    _afterAnimation();
                }
            }
        }
    };
})();

Edit:

Die ganzen Optionen könnte man in ein Member-Objekt options setzen. Ob private oder public, bleibt ja dir überlassen. Wär noch ein wenig schöner.

BlackScorp · 05.07.2010, 15:00

das ist mir schon klar

aber ich sehe code optimierung als schönheits op. zz lege ich wert auf funktionalität, da ich etwas unter zeitdruck stehe.. meine css geschichten und php sind auch nicht optimal, aber sie funktionieren.. und eine gemeinsame funktion in einzelnen cases habe ich auch bereits versucht.. jedoch hängen da viel zu viele variablen von der himmelsrichtung ab.. mir gehts jetzt halt darum, wie ich es schaffen kann die anzahl der steps auf die dauer der animation anzupassen.

rudygotya · 05.07.2010, 15:05

Zitat:

das ist mir schon klar

aber ich sehe code optimierung als schönheits op

Naja, eher nicht. In dem Fall checkt man nicht mehr, was wo wie passiert ohne sinnlosen Mehraufwand. Nicht persönlich gemeint, aber bei dem Wulst hat man wenig Lust, sich an den Fehler ranzukämpfen. Aufgeräumter Code würde auch einfach das Isolieren des Fehlers ermöglichen. Zudem wird der Code kleiner, js schneller ausgeführt und gerade für das, was du da erzeugst, bietet sich einfach ein Singleton an.

Zu deinem Edit eine sehr unschöne Lösung:

PHP-Code:

  
step:function (){
        animateChar = window.animateChar = function (){
                $("div#char").attr("class","char player_walk"+i+"_"+direction);
                //if(i>6)i=1; else i++;
                i++;
                setTimeout(animateChar(),100);
            }
            
        }

BlackScorp · 05.07.2010, 15:37

naja zu dem code.. ich habe ja die relevante stelle gepostet

ich bin mir sicher keiner würde im oberen teil durchbliken..

zu deiner funktion... leider hat es nicht funktioniert.. ich habe gesehen dass jQuery eine delay() funktion hat.. muss mal schauen ob ich es nicht irgendwie hinkriege nur das i zu incrementieren, wenn 100ms der animation schon vorbei sind. mal sehen ob sich das was machen lässt...

ich tüftle weiter mal rum, vllt fällt dir ja auch noch ein wie man es lösen könnte

rudygotya · 05.07.2010, 17:01

Zitat:

naja zu dem code.. ich habe ja die relevante stelle gepostet

Naja, nicht ganz. Da das ganze wiederum in einer Funktion gekapselt ist, ist der scope gleich ein anderer. Von dem her macht das nen ganz gewaltigen Unterschied.

@ code: sorry, aber so lang das so eine Sprachverwaltigung ist, hab ich auch nicht grade große Motivation. Nicht geklappt bringt auch nicht viel, weißt du doch am besten

Fehlermeldung? Etc.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JQuery animate klappt in IE nicht richtig	mysteryxxx	JavaScript, Ajax und mehr	2	29.05.2009 09:17

05.07.2010, 10:49
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	[Erledigt] jQuery animate step: aktuellen step und delay festlegen Hallo leute, wie es schon im titel steht. will ich gerne bei der eigenschaft step: den aktuellen step herausfinden und ein delay zwischen den einzelnen steps festlegen. ich möchte während ein div animiert wird, bei einem anderen div die css klasse ändern. mein aktueller versuch ist folgender: Code: i = 1; $('.animiertesDiv').animate({ "left":"+=10", "top":"+=10" },{ duration: 'slow', step:function(){ //hier soll das div, alte klasse verlieren und eine neue klasse erhalten $('.anderesdiv').attr('class','neue_class_'+i); // da duration slow 600 ms dauert, wollte ich 100 ms pause machen i++; } , complete: function(){ afterAnimation(); } }); hoffe ihr könnt mir weiterhelfen, ich kann zwar in step , eine variable als parameter übergeben, jedoch stehen dort die werte für top und left, anfang und ende. ich brauch aber einen step index und irgendwie eine pause zwischen den steps festlegen MFG BlackScorp __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

05.07.2010, 13:17
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Schreib dir das als singleton, dann brauchst du auch kein globales i. Dann kannst du auch einfach bestimmen, ob schon ein Animiervorgang stattfindet und dementsprechend über complete die Instanzvariable zurücksetzen, die den Aufruf blockiert. grüße __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

05.07.2010, 13:40
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	naja es ist kein globales i, dieser codeausschnitt befindet sich in einer funktion. es geht da auch nicht um die anzahl der steps, sondern wann die steps ausgeführt werden, in welchen intervall. ich könnte i nach ablauf auf 0 setzen oder so. aber danach kommt halt das problem, dass die hauptanimation noch weiterlauft und die animation des anderen divs, ist schon längst vorbei. es müsste doch irgendwie möglich sein , da ein settimeout reinsetzen von 100 ms zwischen den einzelnen steps... __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

05.07.2010, 13:55
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	ok dann "zeige" ich es am besten , was ich vorhabe, du siehst da in meiner signatur, link zu meinem spiel, log dich da mal ein username:testuser, pw:123 und dann lauf mal auf der karte herum, du wirst sehen, dass die figur , viel zu schnell mit den beinen "strampelt" , wenn ich das nun verlangsamen könnte, würde es besser aussehen.. habs gerade mit deinem settimeout ausprobiert und firebug spuckt folgende meldung aus: too much recursion EDIT: habs gerade so versucht: Code: i = 1; $('div#char').attr('class','char player_'+direction); $('div#mapScreen div.mapDisplay').animate({ "left":left, "top":top },{ duration: 600, step:function (){ function animateChar(){ $("div#char").attr("class","char player_walk"+i+"_"+direction); //if(i>6)i=1; else i++; i++; setTimeout(animateChar(),100); } } , complete: function(){ afterAnimation(); $('div#char').attr('class','char player_'+direction); } }); keine fehlermeldung .. aber auch keine animation __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen Geändert von BlackScorp (05.07.2010 um 14:01 Uhr).

05.07.2010, 14:54
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Gerade für dein animateMap bietet sich doch ein Singleton an. Schau dir mal das Monster an: PHP-Code: function animateMap(direction){ var left = ""; var top = ""; var mapHeight = 9; var mapWidth = 9; var tileWidth = 64; var tileHeight = 32; var mapX = 0; var mapY = 0; var mapTop = 0; var mapLeft = 0; var diagonale = calcRadius(); var i = 0; var afterAnimation; switch(direction){ case 'n':{ left = "+=32"; top = "+=16"; //Reihe Oben erstellen mapX = (parseInt($('span.x').html())-(diagonale)); mapY = parseInt($('span.y').html()); mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)-(Math.round(tileHeight/2))); mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)-(Math.round(tileWidth/2))); mapX--; for(i = 0;i<mapWidth;i++){ $('div#mapScreen div.mapDisplay').append( '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>' ); mapX++; mapY--; mapLeft +=tileWidth; } //Reihe links erstellen mapX = parseInt($('span.x').html()); mapY = (parseInt($('span.y').html())+(diagonale)); mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)+(Math.round(tileHeight/2))); mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)-(Math.round(tileWidth/2))); mapY++; for(i = 0;i < mapHeight-1;i++){ $('div#mapScreen div.mapDisplay').append( '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>' ); mapX--; mapY--; mapTop -= tileHeight; } _afterAnimation = function(){ //Reihe unten Entfernen mapX = parseInt($('span.x').html())+(diagonale); mapY = parseInt($('span.y').html()); mapX++; mapY++; for(i = 0;i<mapWidth;i++){ $('div#X'+mapX+'Y'+mapY).remove(); mapX--; mapY++; } //Reihe rechts Entfernen mapX = parseInt($('span.x').html()); mapY = parseInt($('span.y').html())-(diagonale); mapY--; mapX++; for(i = 0;i<mapHeight;i++){ $('div#X'+mapX+'Y'+mapY).remove(); mapX++; mapY++; } } break; } case 's':{ left = "-=32"; top = "-=16"; //Reihe Rechts erstellen mapX = parseInt($('span.x').html()); mapY = parseInt($('span.y').html())-(diagonale); mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)-(Math.round(tileHeight/2))); mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)+(Math.round(tileWidth/2))); mapY--; for(i = 0;i < mapHeight;i++){ $('div#mapScreen div.mapDisplay').append( '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>' ); mapX++; mapY++; mapTop += tileHeight; } //Reihe Unten erstellen mapX = (parseInt($('span.x').html())+(diagonale)); mapY = parseInt($('span.y').html()); mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)+(Math.round(tileHeight/2))); mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)-(Math.round(tileWidth/2))); mapY++; for(i = 0;i<mapWidth-1;i++){ $('div#mapScreen div.mapDisplay').append( '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>' ); mapLeft -= tileWidth; mapX--; mapY++; } afterAnimation = function(){ //Reihe links Entfernen mapX = parseInt($('span.x').html()); mapY = parseInt($('span.y').html())+(diagonale); mapY++; mapX--; for(i = 0;i<mapHeight;i++){ $('div#X'+mapX+'Y'+mapY).remove(); mapX--; mapY--; } //Reihe oben Entfernen mapX = parseInt($('span.x').html())-(diagonale); mapY = parseInt($('span.y').html()); mapX--; mapY--; for(i = 0;i<mapWidth;i++){ $('div#X'+mapX+'Y'+mapY).remove(); mapX++; mapY--; } } break; } case 'w':{ left = "+=32"; top = "-=16"; //Reihe links erstellen mapX = parseInt($('span.x').html()); mapY = (parseInt($('span.y').html())+(diagonale)); mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)+(Math.round(tileHeight/2))); mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)-(Math.round(tileWidth/2))); mapY++; for(i = 0;i < mapHeight;i++){ $('div#mapScreen div.mapDisplay').append( '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>' ); mapX--; mapY--; mapTop -= tileHeight; } //Reihe Unten erstellen mapX = (parseInt($('span.x').html())+(diagonale)); mapY = parseInt($('span.y').html()); mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)+(Math.round(tileHeight/2))); mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)+(Math.round(tileWidth/2))); mapX++; for(i = 0;i<mapWidth-1;i++){ $('div#mapScreen div.mapDisplay').append( '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>' ); mapLeft -= tileWidth; mapX--; mapY++; } afterAnimation = function(){ //Reihe oben Entfernen mapX = parseInt($('span.x').html())-(diagonale); mapY = parseInt($('span.y').html()); mapX--; mapY--; for(i = 0;i<mapWidth;i++){ $('div#X'+mapX+'Y'+mapY).remove(); mapX++; mapY--; } //Reihe rechts Entfernen mapX = parseInt($('span.x').html()); mapY = parseInt($('span.y').html())-(diagonale); mapY--; mapX++; for(i = 0;i<mapHeight;i++){ $('div#X'+mapX+'Y'+mapY).remove(); mapX++; mapY++; } } break; } case 'e':{ left = "-=32"; top = "+=16"; //Reihe Oben erstellen mapX = (parseInt($('span.x').html())-(diagonale)); mapY = parseInt($('span.y').html()); mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)-(Math.round(tileHeight/2))); mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)-(Math.round(tileWidth/2))); mapX--; for(i = 0;i<mapWidth;i++){ $('div#mapScreen div.mapDisplay').append( '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>' ); mapX++; mapY--; mapLeft +=tileWidth; } //Reihe rechts erstellen mapX = parseInt($('span.x').html()); mapY = (parseInt($('span.y').html())-(diagonale)); mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)+(Math.round(tileHeight/2))); mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)+(Math.round(tileWidth/2))); mapX++; for(i = 0;i < mapHeight-1;i++){ $('div#mapScreen div.mapDisplay').append( '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>' ); mapX++; mapY++; mapTop += tileHeight; } afterAnimation = function(){ //Reihe unten Entfernen mapX = parseInt($('span.x').html())+(diagonale); mapY = parseInt($('span.y').html()); mapX++; mapY++; for(i = 0;i<mapWidth;i++){ $('div#X'+mapX+'Y'+mapY).remove(); mapX--; mapY++; } //Reihe links Entfernen mapX = parseInt($('span.x').html()); mapY = parseInt($('span.y').html())+(diagonale); mapY++; mapX--; for(i = 0;i<mapHeight;i++){ $('div#X'+mapX+'Y'+mapY).remove(); mapX--; mapY--; } } break; } } i = 1; $('div#char').attr('class','char player_'+direction); $('div#mapScreen div.mapDisplay').animate({ "left":left, "top":top },{ duration: 'slow', step:function(){ $('div#char').attr('class','char player_walk'+i+'_'+direction); i++; if(i > 6) i = 1; } , complete: function(){ $('div#char').attr('class','char player_'+direction); afterAnimation(); } }); } Wenn du genauer hinsiehst, fällt dir auf, dass in jedem case statement afterAnimation deklariert wird. Abstrahier das doch mal. Nur als Ansatz: PHP-Code: var animateMap = (function () { var left="", top="", mapHeight=9, mapWidth=9, tileWidth=64, tileHeight=32, mapX=0, mapY=0, mapTop=0, mapLeft=0, diagonale=calcRadius(), i=0, afterAnimation = function () { // tu irgendwas }, _runThis = function () { // tu irgendwas }; direction return { run : function (direction) { switch(direction){ case 'n' : { _runThis(direction); _afterAnimation(); } case 's' : { _runThis(direction); _afterAnimation(); } case 'w' : { _runThis(direction); _afterAnimation(); } case 'e': { _runThis(direction); _afterAnimation(); } } } }; })(); Edit: Die ganzen Optionen könnte man in ein Member-Objekt options setzen. Ob private oder public, bleibt ja dir überlassen. Wär noch ein wenig schöner. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

05.07.2010, 15:00
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	das ist mir schon klar aber ich sehe code optimierung als schönheits op. zz lege ich wert auf funktionalität, da ich etwas unter zeitdruck stehe.. meine css geschichten und php sind auch nicht optimal, aber sie funktionieren.. und eine gemeinsame funktion in einzelnen cases habe ich auch bereits versucht.. jedoch hängen da viel zu viele variablen von der himmelsrichtung ab.. mir gehts jetzt halt darum, wie ich es schaffen kann die anzahl der steps auf die dauer der animation anzupassen. __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

05.07.2010, 15:37
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	naja zu dem code.. ich habe ja die relevante stelle gepostet ich bin mir sicher keiner würde im oberen teil durchbliken.. zu deiner funktion... leider hat es nicht funktioniert.. ich habe gesehen dass jQuery eine delay() funktion hat.. muss mal schauen ob ich es nicht irgendwie hinkriege nur das i zu incrementieren, wenn 100ms der animation schon vorbei sind. mal sehen ob sich das was machen lässt... ich tüftle weiter mal rum, vllt fällt dir ja auch noch ein wie man es lösen könnte __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen