If I have<div id="curve" style="position:relative; height:100px; width:100px; />
How would I make it move on a curve? I've googled and everything but can't seem to find another example that would call two functions at once. This is the kind of code I would like, but doesn't work:
$('#curve').click(function () { $(this).animate( { top: 400, left = $(this).left() + $(this).left()*$(this).left() }, 'slow', function() { $(this).animate( { left: 600 }, 'fast' ); } ); });
Even if that's not correct code, I believe animate only takes "destinations" for something to go to, so a dynamic destination wouldn't work I think. What am I looking for to make this work?
EDIT:: I'll definitely pick up that plugin, but I'm also wonder why this bit of code doesn't work as I'd expect it to.
Here's another attempt using a for loop and the delay method
$('#curve').click(function () { for (var i=0; i<400; i++ ) { $(this).delay(1000); $(this).css( { top: i, left: i*1.5 } ); } });
Except it just instantly goes to that position, no delay or anything. so if it was starting at [0,0], as soon as I click it it teleports to [400,600]. Why doesn't the delay work?
Click the Selection tool in the Tools panel. Select the motion path by doing one of the following: Click the tween span in the Timeline and then click the motion path on the Stage. Click the tweened object on the Stage and then click the motion path.
The jQuery.path plugin is what you want:
Example: animate along an arc
var arc_params = { center: [285,185], radius: 100, start: 30, end: 200, dir: -1 }; $("my_elem").animate({path : new $.path.arc(arc_params)});
Example: animate along a sine wave
var SineWave = function() { this.css = function(p) { var s = Math.sin(p*20); var x = 500 - p * 300; var y = s * 50 + 150; var o = ((s+2)/4+0.1); return {top: y + "px", left: x + "px", opacity: o}; } }; $("my_elem").animate({path : new SineWave});
I think that this time, you have to recalculate animated curve part by part in js and then do it by moving by little parts (= you probably could find plugin OR you'll have to do all the math by yourself)
Edit 2: Previously added link was moved=> http://foxparker.wordpress.com/2009/09/22/bezier-curves-and-arcs-in-jquery/. Thanks, Zach.
Edit 1: this intrigued me, so I did little google research - just as I thought: plugin ready for use here: http://foxparker.wordpress.com/2009/09/22/bezier-curves-and-arcs-in-jquery/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With