Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

Jquery animaton jittery

  • 23-06-2009 3:22pm
    #1
    Placebo
    Registered Users, Registered Users 2 Posts: 8,070 ✭✭✭


    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"&gt;

    <html>

    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js&quot; 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&quot;&gt;
    </div>


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

    [/PHP]


Comments

  • #2
    Webmonkey
    Registered Users, Registered Users 2 Posts: 9,579 ✭✭✭Webmonkey


    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.


  • #3
    ocallagh
    Registered Users, Registered Users 2 Posts: 3,141 ✭✭✭ocallagh 


    <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.


Advertisement