Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

jimmyn00b · 05.08.2010

Hallöchen zusammen!

Ich hab eine frage zur jquery.

Ich habe ein div und 2 buttons.
Das div verschiebt sich pro buttonclick um 50px.

Jetzt soll es sich aber in 50px schritten um ein quadrat verschieben.

mein ansatz war so:

HTML:

if ("left > 250px")
                        "top": "+=50px",
                    if ("top = 250px")
                        "left": "-=50px",
                    if ("left = 0px")
                        "top": "-=50px",
                    if ("top > 0px")

nach 5 klicks auf einen button, soll das div dann seine animation in eine andere richtung ändern ( also ums eck vom quadrat).

momentan bin ich so weit. :

HTML:

$(".izs").click(function(event){
                 $("#bewegungsobjekt").animate({ 
                        "left": "+=50px",    
                });
             });

Existieren in jquery if statements? Abgesehen von meiner syntax^^

Würde mich über Tipps freuen und bedanke mich schonmal im vorraus.

Liebe grüße
Jimmy

cebito · 05.08.2010

AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

jimmyn00b schrieb:
Existieren in jquery if statements?

Ja, jQuery ist JavaScript.

fexx · 05.08.2010

AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

könntest du mal bitte ein bild machen, wie genau sich der div bewegen soll?

jimmyn00b · 05.08.2010

AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

Nach 20 klicks auf "im urzeigersinn" soll das div wieder an der anfangsposition sein.
Und das ganze sol auch in die andere richtung beliebig gehen mit " gegen UZS" button.

Hoffentlich ists jetzt verständlicher.

sokie · 05.08.2010

AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

speicher doch einfach deine positionen in einer variablen.

Code:

//start initialisieren:
var divPos = 0;
var bewegung;

$(".izs").click(function(event){
  if(divPos < 5){
    bewegung = {"left" : "+= 50px"};
  }
  if(divPos > 5 && divPos < 10){
    bewegung = {"top" : "+= 50px"};
  } //usw
  
  $("#bewegungsobjekt").animate(bewegung);
  divPos +=1;
});

jimmyn00b · 05.08.2010

AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

Bin ein blutiger anfänger in Digitaler technik die mit dem buchstaben "J" anfängt ..

Sokie, danke schonmal.

Könntest du mir das noch etwas mehr auflösen mit dem var?

Ich tuh mir da noch ziehmlich schwer.
nich alles vorkauen sondern noch etwas ausbaufähiger für einen anfänger gestalten?

Das wär HAMMERFETT von dir/euch.

Duddle · 05.08.2010

AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

Du wirst aber ein Problem bekommen, wenn ein Nutzer mehrmals schnell hintereinander auf den Knopf drückt. Dann gehen die ganzen Events in eine Warteschlange und werden nacheinander abgearbeitet, d.h. es kann zu mehr / falschen Animationen kommen.

Ich kenne keinen Weg, um das zu umgehen, ausser wenn du tatsächlich die aktuelle Position beim Klick abfragst und darauf reagierst. Dann wird der Code aber sehr unübersichtlich und schwer zu erweitern / warten.

Duddle

jimmyn00b · 05.08.2010

AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

warum kommt es da zu falschen oder mehr animationen ?

Wenn kein fehler drinn ist und er nacheinander abarbeitet und nichts übersprigt sollte es doch aufgehen .
Meiner logik nach.

DANKE für Bemühung.

Hoffentlich hat jemand noch einen plan.
Und wie schon erwähnt.
es solte jquerybasierend sein .
gruß jimmy

Duddle · 05.08.2010

AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

Okay, wenn du es wie sokie machst, sollte das funktionieren.

Ich hatte bei meinem Ansatz gedacht, du würdest die Position vergleichen. In diesem Fall hätten z.b. 10 schnelle Klicks hintereinander jeweils die Rechts-Bewegung in die Warteschlange gelegt, weil die Animation bis dahin noch nicht weit genug (für den else-Fall) abgelaufen wäre.

Duddle

saila · 05.08.2010

AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

Hi,

also zum Ansatz, wobei ich es so wohl in etwas umsetzen würde:
Dem div, in welchem es ablaufen soll (also der umfassende div) eine id zuweisen. Aus dieser die breite per js auslesen.

Für die Annimation muss das zu bewegende Object dann an auf die zuvor ausgelesene Seite annimiert werden. Danach nach unten (sprich die höhe des umfassenden div's negativ erfassen).

Wenn nun weitere Objecte angesetzt werden sollten, einfach before verwenden.

Um auf die Problematik von Duddle einzugehen - entweder eine Verzögerung einbinden, was den click zum Start der Annimation führt. Oder rückprüfen, ob das zuvor annimierte Object noch in der Annimation steht und somit einen click unterbinden. Das letztere kann auch mit einem versteckten html-element erfolgen, welches beim Start gesetzt wird und zum Schluss wieder gelöscht wird.

Das wäre mein Ansatz.

sokie · 05.08.2010

AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

jimmyn00b schrieb:
Bin ein blutiger anfänger in Digitaler technik die mit dem buchstaben "J" anfängt ..

Sokie, danke schonmal.

Könntest du mir das noch etwas mehr auflösen mit dem var?

Ich tuh mir da noch ziehmlich schwer.
nich alles vorkauen sondern noch etwas ausbaufähiger für einen anfänger gestalten?

Das wär HAMMERFETT von dir/euch.

die Überlegung hat auch so viel gar nicht javascript zu tun. Deine Grafik ist ja nun sehr anschaulich. Die Überlegung ist nun die, dass dein bewegtes div 20 Positionen einnehmen kann. /also Startposition + 19 weitere. Da das div ja nun schon am Anfang auf einer position steht habe ich diese Position 0 genannt und in einer variablen (divPos) (das ist einfach ein speicher für einen Wert) gespeichert.
wenn man nun auf die schaltfläche für "weiter"->" izs" klickt soll dieser Wert immer um 1 erhöht werden (divPos += 1).
jetzt kann man den Wert, den divPos gerade hat vergleichen:
ist er kleiner als 5, dann soll es nach rechts gehen;
ist er größer als 5 aber kleiner als 10 (divPos > 5 && divPos < 10) nach unten;
größer 10 und kleiner 15: nach rechts;
größer als 15: nach oben.
Ausser der logischen Überlegung ist an der Stelle noch gar nicht viel mit javascript gelaufen (ausser var divPos = 0; und divPos +=1; )

SineTempore · 06.08.2010

AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

kleine anmerkung an sokies code ;-)
wenn des ding im kreis laufen soll, einfach statt

Code:

divPos += 1;

Code:

divPos = (divPos+1)%20;

.
Dann zählt der Zähler bis 19 und fängt dann wieder bei 0 an.

sokie · 06.08.2010

AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

danke für die Ergänzung, Ich hatte das zwar im Kopf aber bei der Erklärung vergessen.

ti8shbi · 06.08.2010

AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

Duddle schrieb:
Du wirst aber ein Problem bekommen, wenn ein Nutzer mehrmals schnell hintereinander auf den Knopf drückt. Dann gehen die ganzen Events in eine Warteschlange und werden nacheinander abgearbeitet, d.h. es kann zu mehr / falschen Animationen kommen.

Ich kenne keinen Weg, um das zu umgehen, ausser wenn du tatsächlich die aktuelle Position beim Klick abfragst und darauf reagierst. Dann wird der Code aber sehr unübersichtlich und schwer zu erweitern / warten.

Duddle

Es gibt die Möglichkeit, während der Animation mit .unbind() auf das sich bewegende Objekt, den Klick zu verhindern, und wenn die Animation fertig ist, erneut den ClickHandler zu setzen.

Duddle · 06.08.2010

AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

ti8shbi schrieb:
Es gibt die Möglichkeit, während der Animation mit .unbind() auf das sich bewegende Objekt, den Klick zu verhindern, und wenn die Animation fertig ist, erneut den ClickHandler zu setzen.

Jau, genau das habe ich auch probiert, aber zumindest bei mir hat er dann ein sehr seltsames Verhalten gezeigt. Prinzipiell sollte es zwar so funktionieren, aber in der Praxis habe ich dann wohl etwas falsch gemacht

Duddle

jimmyn00b · 06.08.2010

AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

Guten morgen. hab mich gestern abend nochmal damit auseinandergesetzt. danke für die hilfe.!! Ihr seid geil!

haben das jetzt so hinbekommen:

$("#izs").click(function(event){

var vleft = $("#bewegungsobjekt").css('left').replace("px", "") * 1;
var vtop = $("#bewegungsobjekt").css('top').replace("px", "") * 1;
var time = 10;
var aleft;
var atop;

if((vleft < 250) && (vtop == 0)){
aleft = '+=50';
atop = '+=0';
}

if((vleft == 250) && (vtop < 250)){
aleft = '+=0';
atop = '+=50';
}

if((vleft > 0) && (vtop == 250)){
aleft = '-=50';
atop = '+=0';
}

if((vleft == 0) && (vtop > 0)){
aleft = '+=0';
atop = '-=50';
}

$('#bewegungsobjekt').animate({
left: aleft ,
top: atop
}, time, function() {

});

});