Jquery animaton jittery

Placebo · 23-06-2009 4:22pm #1

Came up with some code to rotate images, basically around a circles path
seems jittery, can anyone improve?

try for yourself, save to .html

[PHP]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

var radius = 200;
var centerX = 300;
var centerY = 700;
var steps= 20;

var xValues = [0];
var yValues = [0];

for (var i = 1; i < steps; i++) {
xValues = (centerX + radius * Math.cos(Math.PI * i / steps*2-Math.PI/2));
yValues = (centerY + radius * Math.sin(Math.PI * i / steps*2-Math.PI/2));

$('#block').animate({top: xValues, left:yValues },200);
}

});

</script>

<body bgcolor="#7dc242">
<div style="position:absolute, width:100%, height:100%, margin:0px, padding:0px;">

<div id ="block" style="position:absolute; top:300px; left:700px;">
<img src="http://www.veryicon.com/icon/preview/System/Function/circle red Icon.jpg">
</div>

</div>
</body>
</html>

[/PHP]

Webmonkey · 23-06-2009 4:27pm

Not too familiar with it myself but this line:

$('#block').animate({top: xValues[i], left:yValues[i] },200);

Is this a millisecond delay between each step I wonder, reduce this to 50, might look smoother.

You can also account for the speed up that you may not want by incrementing the steps up to 50 or 75 from 20 or something. I'd say by tweaking these two, you'll get the desired effect.

ocallagh · 23-06-2009 5:03pm

<script type="text/javascript">
$(document).ready(function(){
var radius = 200;
var centerX = 300;
var centerY = 700;
var steps= 100;
var xValues = [0];
var yValues = [0];
var mathpi = Math.PI;
var block = $('#block');
for (var i = 1; i < steps; i++) {
var c = mathpi  * i / steps*2-mathpi /2;
xValues[i] = (centerX + radius * Math.cos(c));
yValues[i] = (centerY + radius * Math.sin(c));
block.animate({top: xValues[i], left:yValues[i] },30);
}
});
</script>

works a little quicker.

Jquery animaton jittery

Comments