Anzeige

JQuery: animation wiederholen, während Element angeglickt wird

JQuery: animation wiederholen, während Element angeglickt wird | PSD-Tutorials.de

Erstellt von julesxxx, 14.12.2010.

  1. julesxxx

    julesxxx Noch nicht viel geschrieben

    Dabei seit:
    13.01.2010
    Beiträge:
    3
    Geschlecht:
    männlich
    Ort:
    Jüchen
    Software:
    Scriptly, Dreamweaver, Eclipse
    Kameratyp:
    Nikon D5000 DSLR
    JQuery: animation wiederholen, während Element angeglickt wird
    Hey, ich beschäftige mich seit ein paar Tagen mit JQuery,
    bis jetzt läuft eigentlich auch alles bestens.

    Zum Problem:
    Ich programmier gerade eine Galerie, die in etwa so aussehen soll: Dynamic Drive DHTML Scripts- CMotion Image Gallery
    Nur mit dem kleinen unterschied, dass sich die Bilder verschieben sollen, wenn ich auf einen Button klicke.
    Bis jetzt klappt das nur, dass sich die Bilder um z.B. 50px verschieben.
    Ich möchte das so haben, dass sich die Bilder, so lange man auf den button klickt verschieben.
    Ich hoffe mein Problem ist irgendwie verständlich...
    Könnt ihr mir da helfen?

    Mein Ansatz bis jetzt:
    Der HTML-code
    HTML:
    1.  
    2. <div id="galleryWrapper" style="overflow:hidden; height: 380px; width:100%; position: relative;">
    3.            <div id="button_layer">
    4.                <img id="prev_label" src="gal_prev.png"/>
    5.                <img id="next_label" src="gal_next.png"/>
    6.                <div class="clear"></div>
    7.            </div>
    8.            <div id="gallery" style="margin-left: 0px; white-space: nowrap; position: absolute; top: 0px;">
    9.                  <img  src="bild1.jpg" height="380px"/> usw...
    10.  
    11.            </div>
    12.         </div>
    13.  
    Und der betroffene JQuery-Code:
    Code (Text):
    1.  
    2.     $("#prev_label").click(function()
    3.         {
    4.                 $("#gallery")
    5.                 .animate({
    6.                     "marginLeft": "+=50"
    7.                 },100, "swing");
    8.         })
    9.  
    10.         $("#next_label").click(function()
    11.         {
    12.                  $("#gallery")
    13.                     .animate({
    14.                         "marginLeft": "-=50"
    15.                     },100, "swing");
    16.  
    17.         })
    18.  
    Wenn man also klickt wird MarginLeft des gallery-containers erhöht/erniedrigt..

    Danke :)
     
    #1      
  2. timmeythe1st

    timmeythe1st nichtswissender

    Dabei seit:
    08.01.2009
    Beiträge:
    113
    Geschlecht:
    männlich
    Ort:
    bei Berlin
    Software:
    den kopf (manchmal)
    Kameratyp:
    Panasonic DMC-FZ38
    JQuery: animation wiederholen, während Element angeglickt wird
    AW: JQuery: animation wiederholen, während Element angeglickt wird

    ich habe jetzt auf die schnelle keine passenden jquery-codes da, aber ein ansatz kann ich versuchen dir zu vermitteln:
    du müsstest nicht, wie dus bisher gemacht hast, das ereignis "click" ansprechen, sonder das ereignis "onmousedown", wobei in einer schleife dann immer wieder das verschieben aufgerufen werden soll
    und bei dem ereignis "onmouseup" soll dieser vorgang unterbrochen werden.
     
    #2      
  3. julesxxx

    julesxxx Noch nicht viel geschrieben

    Dabei seit:
    13.01.2010
    Beiträge:
    3
    Geschlecht:
    männlich
    Ort:
    Jüchen
    Software:
    Scriptly, Dreamweaver, Eclipse
    Kameratyp:
    Nikon D5000 DSLR
    JQuery: animation wiederholen, während Element angeglickt wird
    AW: JQuery: animation wiederholen, während Element angeglickt wird

    kann ich dann eine while-schleife
    mit mousedown bedingung benutzen,
    oder wie kann man in JQuery schleifen realisieren?
     
    #3      
  4. Doitsu

    Doitsu Aktives Mitglied

    Dabei seit:
    15.04.2009
    Beiträge:
    482
    JQuery: animation wiederholen, während Element angeglickt wird
    AW: JQuery: animation wiederholen, während Element angeglickt wird

    Na ja, bei 'onmousedown' machst du halt ganz normal deine .animate - bei onmouseup benutzt du halt .stop?
    evtl. dann auch noch ein setInterval & clearInterval einbauen - damit sich die Animation immer wiederholt (oder die Pixel Anzahl ziemlich hoch setzen - wuerde aber eher Interval vorschlagen)
     
    #4      
  5. julesxxx

    julesxxx Noch nicht viel geschrieben

    Dabei seit:
    13.01.2010
    Beiträge:
    3
    Geschlecht:
    männlich
    Ort:
    Jüchen
    Software:
    Scriptly, Dreamweaver, Eclipse
    Kameratyp:
    Nikon D5000 DSLR
    JQuery: animation wiederholen, während Element angeglickt wird
    AW: JQuery: animation wiederholen, während Element angeglickt wird

    vielen dank :)
    klappt super mit mousedown und mouseup
     
    #5      
Seobility SEO Tool
x
×
×