Ankündigung

Einklappen
Keine Ankündigung bisher.

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

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [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
    apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

  • #2
    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
    I like cooking my family and my pets.
    Use commas. Don't be a psycho.
    [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

    Kommentar


    • #3
      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...
      apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

      Kommentar


      • #4
        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.

        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"
        I like cooking my family and my pets.
        Use commas. Don't be a psycho.
        [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

        Kommentar


        • #5
          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
          apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

          Kommentar


          • #6
            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 
            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(
            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(
            0;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(
            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(
            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(
            0;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(
            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(
            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(
            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(
            0;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(
            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(
            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(
            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(
            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(
            0;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(
            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(
            0;i<mapHeight;i++){
                                $(
            'div#X'+mapX+'Y'+mapY).remove();
                                
            mapX--;
                                
            mapY--;
                            }
                        }
                        break;
                    }
                }
              
                
            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(
            61;
                    }
                    ,
                    
            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.
            I like cooking my family and my pets.
            Use commas. Don't be a psycho.
            [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

            Kommentar


            • #7
              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.
              apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

              Kommentar


              • #8
                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);
                            }
                            
                        } 
                I like cooking my family and my pets.
                Use commas. Don't be a psycho.
                [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

                Kommentar


                • #9
                  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
                  apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

                  Kommentar


                  • #10
                    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.
                    I like cooking my family and my pets.
                    Use commas. Don't be a psycho.
                    [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

                    Kommentar


                    • #11
                      das ist ja das problem, firebug sagt , dass alles ok ist. jedoch strampelt der typ nicht bei der animation der karte.

                      das switch case vor der animate funktion, sagt eigentlich nur aus in welche richtung animiert wird, also welche top und left werte animiert wird, dabei addiere ich eine reihe von divs an die gewünschte stelle der karte und lösche überflüssige divs, die nicht im sichtbaren bereich liegen.. keine zauberei und ich kann dir versichern dass der teil unrelevant für mein fehler ist, da das ganze alles vor der animation ausgeführt wird... es ist wirklich diese animate funktion.. ich denke die einzige möglichkeit, die ich habe , ist die animation per hand mit schleifen erstellen... wenn dir was einfällt , sag bescheid..

                      MFG
                      apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

                      Kommentar


                      • #12
                        ok ich habe das problem gelößt mit folgemdem code:

                        Code:
                         var lastTime = Date.now()+100;
                            i = 1;
                            $('div#char').attr('class','char player_'+direction);
                            $('div#mapScreen div.mapDisplay').animate({
                                "left":left,
                                "top":top
                            },{
                                queue: false ,
                                duration: 'slow',
                                step:function(){
                                    $("div#char").attr("class","char player_walk"+i+"_"+direction);
                                    if(lastTime < Date.now()){
                                        i++;
                                        lastTime = Date.now()+100;
                                    }
                                },
                                complete: function(){
                                    afterAnimation();
                                    $('div#char').attr('class','char player_'+direction);
                                }
                            });
                        jetzt muss ich irgendwie es schaffen meine onclick ereignisse während der animation zu stoppen..
                        apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

                        Kommentar


                        • #13
                          Zitat von BlackScorp Beitrag anzeigen
                          jetzt muss ich irgendwie es schaffen meine onclick ereignisse während der animation zu stoppen..
                          Setze dir zu Beginn der Animation ein Flag (boolesche Variable, bspw. animationIsActive=true), und frage dieses im onclick-Handler ab, bevor du darin irgendetwas weiteres tust. Und setze es mit dem Ende der Animation wieder zurück (auf false).
                          [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

                          Kommentar


                          • #14
                            Zitat von ChrisB Beitrag anzeigen
                            Setze dir zu Beginn der Animation ein Flag (boolesche Variable, bspw. animationIsActive=true), und frage dieses im onclick-Handler ab, bevor du darin irgendetwas weiteres tust. Und setze es mit dem Ende der Animation wieder zurück (auf false).
                            *facepalm* sehe vor lauter baumen den wald nicht.. ich habe für jeden click einen neuen event zugewiesen der nichts tut... aber mit if animationisactive ist natürlich viel besser.. gut vielen dank, ich denke das thema Map hat sich nun erledigt. und ich kann weiter programmieren(aber erstmal js code aufraumen)

                            MFG
                            apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

                            Kommentar


                            • #15
                              so habe das jetzt so gemacht, wie du es vorgeschlagen hast.
                              ich rufe beim klicken eine funktion auf, in dieser funktion, wird geprüft ob variable auf true gesetzt ist, wenn ja, wird die animation gestartet, beim starten der animation wird die variable auf false gesetzt und bei complete: function() der animation wird die variable wieder auf true gesetzt. funktioniert ganze 5 felder lang, danach gibts ein kurzen ruck und dann springt die map rum und alles wird falsch berechnet. ich denke sobald ich einmal die events von jQuery aktiviert habe, können die nicht einfach gestoppt werden, ich denke ich muss da mit .die die events löschen...
                              apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

                              Kommentar

                              Lädt...
                              X