Anzeige

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

Mit JQuery per Knopfdruck <div> "ums Eck" animieren??? | PSD-Tutorials.de

Erstellt von jimmyn00b, 05.08.2010.

  1. jimmyn00b

    jimmyn00b Noch nicht viel geschrieben

    Dabei seit:
    30.12.2009
    Beiträge:
    14
    Geschlecht:
    männlich
    Mit JQuery per Knopfdruck <div> "ums Eck" animieren???
    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:
    1. if ("left > 250px")
    2.                         "top": "+=50px",
    3.                     if ("top = 250px")
    4.                         "left": "-=50px",
    5.                     if ("left = 0px")
    6.                         "top": "-=50px",
    7.                     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:
    1. $(".izs").click(function(event){
    2.                  $("#bewegungsobjekt").animate({
    3.                         "left": "+=50px",    
    4.                 });
    5.              });    

    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
     
    Zuletzt von einem Moderator bearbeitet: 05.08.2010
    #1      
  2. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Mit JQuery per Knopfdruck <div> "ums Eck" animieren???
    AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

    Ja, jQuery ist JavaScript.
     
    #2      
  3. fexx

    fexx Aktives Mitglied

    Dabei seit:
    13.07.2010
    Beiträge:
    1.058
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe Creative Cloud, Coda2
    Mit JQuery per Knopfdruck <div> "ums Eck" animieren???
    AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

    könntest du mal bitte ein bild machen, wie genau sich der div bewegen soll?
     
    #3      
  4. jimmyn00b

    jimmyn00b Noch nicht viel geschrieben

    Dabei seit:
    30.12.2009
    Beiträge:
    14
    Geschlecht:
    männlich
    Mit JQuery per Knopfdruck <div> "ums Eck" animieren???
    AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

    [​IMG]

    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.
     
    Zuletzt bearbeitet: 05.08.2010
    #4      
  5. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Mit JQuery per Knopfdruck <div> "ums Eck" animieren???
    AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

    speicher doch einfach deine positionen in einer variablen.

    Code (Text):
    1.  
    2. //start initialisieren:
    3. var divPos = 0;
    4. var bewegung;
    5.  
    6. $(".izs").click(function(event){
    7.   if(divPos < 5){
    8.     bewegung = {"left" : "+= 50px"};
    9.   }
    10.   if(divPos > 5 && divPos < 10){
    11.     bewegung = {"top" : "+= 50px"};
    12.   } //usw
    13.  
    14.   $("#bewegungsobjekt").animate(bewegung);
    15.   divPos +=1;
    16. });
    17.  
    18.  
    19.  
     
    Zuletzt bearbeitet: 05.08.2010
    #5      
  6. jimmyn00b

    jimmyn00b Noch nicht viel geschrieben

    Dabei seit:
    30.12.2009
    Beiträge:
    14
    Geschlecht:
    männlich
    Mit JQuery per Knopfdruck <div> "ums Eck" animieren???
    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.
     
    #6      
  7. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Mit JQuery per Knopfdruck <div> "ums Eck" animieren???
    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
     
    #7      
  8. jimmyn00b

    jimmyn00b Noch nicht viel geschrieben

    Dabei seit:
    30.12.2009
    Beiträge:
    14
    Geschlecht:
    männlich
    Mit JQuery per Knopfdruck <div> "ums Eck" animieren???
    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
     
    #8      
  9. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Mit JQuery per Knopfdruck <div> "ums Eck" animieren???
    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
     
    #9      
  10. saila

    saila Moderatorle

    Dabei seit:
    21.06.2006
    Beiträge:
    2.239
    Geschlecht:
    männlich
    Ort:
    50°48'23.69" N 7°14'22.19" O
    Software:
    Eclipse, PHP5 OO, MySQL5, CSS(auch Barrierefrei), JS, Symfony
    Mit JQuery per Knopfdruck <div> "ums Eck" animieren???
    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.
     
    #10      
  11. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Mit JQuery per Knopfdruck <div> "ums Eck" animieren???
    AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

    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; )
     
    #11      
  12. SineTempore

    SineTempore Nicht mehr ganz neu hier

    Dabei seit:
    25.01.2007
    Beiträge:
    201
    Geschlecht:
    männlich
    Mit JQuery per Knopfdruck <div> "ums Eck" animieren???
    AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

    kleine anmerkung an sokies code ;-)
    wenn des ding im kreis laufen soll, einfach statt
    Code (Text):
    1. divPos += 1;
    Code (Text):
    1. divPos = (divPos+1)%20;
    .
    Dann zählt der Zähler bis 19 und fängt dann wieder bei 0 an.
     
    #12      
  13. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Mit JQuery per Knopfdruck <div> "ums Eck" animieren???
    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.
     
    #13      
  14. ti8shbi

    ti8shbi Allround

    Dabei seit:
    25.08.2007
    Beiträge:
    294
    Geschlecht:
    männlich
    Ort:
    Wien
    Software:
    Photoshop, After Effects, Flex, C4D, Eclipse (Aptana Studio)
    Kameratyp:
    Digicam Kodak Easyshare C663
    Mit JQuery per Knopfdruck <div> "ums Eck" animieren???
    AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

    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.
     
    #14      
  15. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Mit JQuery per Knopfdruck <div> "ums Eck" animieren???
    AW: Mit JQuery per Knopfdruck <div> "ums Eck" animieren???

    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 :p


    Duddle
     
    #15      
  16. jimmyn00b

    jimmyn00b Noch nicht viel geschrieben

    Dabei seit:
    30.12.2009
    Beiträge:
    14
    Geschlecht:
    männlich
    Mit JQuery per Knopfdruck <div> "ums Eck" animieren???
    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() {

    });

    });
     
    Zuletzt bearbeitet: 06.08.2010
    #16      
x
×
×