login  Naam:   Wachtwoord: 
Registreer je!
 Forum
Zoeken  Regels  Help
Categorieën > JavaScript

Smooth moving Div

ozzyos545 – 18/03/2010 16:38
Offline offline




Nieuw lid
 Hey,

Ik wil een scriptje maken waarbij ik een locatie instel (X,Y) waar een DIV naar toe moet 'vliegen' (smooth bewegen).
Je klikt uiteindelijk (of van te voren ingestelde) een locatie aan en de DIV die vliegt naar die locatie toe, in een geleidelijke beweging.

Hoe kan ik dit maken, is er een tutorial, voorbeeldscriptje?

Bij voorbaat dank.


Pagina:

13 antwoorden

Gesponsorde links
Daisycon - Verdien geld met uw website

MiST – 18/03/2010 17:04
Offline offline



Lid
je moet maar eens kijken naar de voorbeeldjes van jQuery UI. Ben er zeker van dat je daar iets kan vinden 

http://ui.jquery.com

Oli4 – 18/03/2010 17:07 (Laatst gewijzigd op 18/03/2010 17:07)
Offline offline



Nieuw lid
jQuery misschien?
http://api.jquery.com/animate/

  1. $("#knop").click(function(){
  2.   $("#div").animate({ 
  3.     left: "10px",
  4.     top: "100px"
  5.   }, 1500 );
  6. });


Edit:net te laat 

MiST – 18/03/2010 20:59
Offline offline



Lid
och, jij lapt er onmiddellijk een voorbeeld bij ;)

JS is niet mijn specialiteit, maar ik wist dat het met jQuery ging, dus standaard antwoordje gepost 

Oli4 – 19/03/2010 15:03
Offline offline



Nieuw lid
Hahaha, ja, ook niet mijn sterkste punt, maar was laatst wat met jQuery bezig en moet zeggen dat het me aardig lukt.
Het is heel simpel, dus waarom niet 

ozzyos545 – 19/04/2010 20:28 (Laatst gewijzigd op 19/04/2010 20:28)
Offline offline



Nieuw lid
Dankje voor de tip van jQuery Animate, het principe werkt goed.

Echter wil ik nu twee animaties achter elkaar plaatsen, en heb dat als volgt gedaan:
  1. $(".block").animate({"left": "580px", "top": "567px"}, { duration: 2000 });
  2.   $(".block").animate({"left": "580px", "top": "537px"}, { duration: 2000 });



Alleen zit tussen de twee animaties een klein momentje waarbij het object stil staat, dit wil ik niet hebben. Weet iemand dit op te lossen?

Oli4 – 19/04/2010 20:31
Offline offline



Nieuw lid
Als ik het goed heb bedoel je iets als dit?
  1. $(".block").animate({"left": "580px", "top": "567px"}, { duration: 2000 }, function(){
  2. $(".block").animate({"left": "580px", "top": "537px"}, { duration: 2000 });
  3. });

Martijn – 19/04/2010 20:54
Offline offline



Crew PHP
daar moet even de uitleg bij dat dat function() gedoe een oncomplete is dus eerst de animatie, en bij de oncomplete de 2e animatie pas

Oli4 – 19/04/2010 20:59
Offline offline



Nieuw lid
Sorry  

ozzyos545 – 19/04/2010 22:44
Offline offline



Nieuw lid
Bedankt voor de reacties, maar het werkt niet 

Nu wordt enkel de eerste animatie uitgevoerd (zoals in vb: 580px; 567px;) en de tweede animatie niet (580, 537)

Jelmerholland – 20/04/2010 11:58
Offline offline



PHP beginner
Hoe heb jij 'm in je volledige code staan zeg maar? Post is ALLES wat je hebt?

Grote codes op http://www.plaatscode.be of course ;)

Gesponsorde links


Pagina:

Dit onderwerp is gesloten.
Actieve forumberichten:

© 2002-2012 Sitemasters.be - Regels - Gehost door: Vircon - Laadtijd: 0.044s