login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Smooth moving Div

Offline ozzyos545 - 18/03/2010 16:38
Avatar van ozzyos545Nieuw 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.

13 antwoorden

Gesponsorde links
Offline MiST - 18/03/2010 17:04
Avatar van MiST 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
Offline Oli4 - 18/03/2010 17:07 (laatste wijziging 18/03/2010 17:07)
Avatar van Oli4 Nieuw lid jQuery misschien?
http://api.jquery.com/animate/

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $("#knop").click(function(){
  2.   $("#div").animate({ 
  3.     left: "10px",
  4.     top: "100px"
  5.   }, 1500 );
  6. });

Edit:net te laat 
Offline MiST - 18/03/2010 20:59
Avatar van MiST 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 
Offline Oli4 - 19/03/2010 15:03
Avatar van Oli4 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 
Offline ozzyos545 - 19/04/2010 20:28 (laatste wijziging 19/04/2010 20:28)
Avatar van ozzyos545 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:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  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?
Offline Oli4 - 19/04/2010 20:31
Avatar van Oli4 Nieuw lid Als ik het goed heb bedoel je iets als dit?
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $(".block").animate({"left": "580px", "top": "567px"}, { duration: 2000 }, function(){
  2. $(".block").animate({"left": "580px", "top": "537px"}, { duration: 2000 });
  3. });
Offline Martijn - 19/04/2010 20:54
Avatar van Martijn 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
Offline Oli4 - 19/04/2010 20:59
Avatar van Oli4 Nieuw lid Sorry  
Offline ozzyos545 - 19/04/2010 22:44
Avatar van ozzyos545 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)
Offline Jelmerholland - 20/04/2010 11:58
Avatar van Jelmerholland 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 ;)
Offline ozzyos545 - 20/04/2010 19:04
Avatar van ozzyos545 Nieuw lid Prima, hier de link: http://www.plaatscode.be/139167/
Offline Oli4 - 20/04/2010 19:22 (laatste wijziging 20/04/2010 19:24)
Avatar van Oli4 Nieuw lid Oh, ik zie het, en via welke route moet het blokje gaan? Hij staat nu boven 10 LANE STRAIGHT. Dan knopje naar rechts is vooraan op de baan en naar achter en knopje links is steeds meer naar achteren
Offline ozzyos545 - 20/04/2010 19:40
Avatar van ozzyos545 Nieuw lid Het knopje naar links heb ik verder nog niet gedefinieerd, enkel als test. De bedoeling is dat de blokjes het rondje gaan maken.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.17s