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 all,
Vanilla are planning an update to the site on April 24th (next Wednesday). It is a major PHP8 update which is expected to boost performance across the site. The site will be down from 7pm and it is expected to take about an hour to complete. We appreciate your patience during the update.
Thanks all.

Jquery animaton jittery

Options
  • 23-06-2009 4:22pm
    #1
    Placebo
    Registered Users 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

  • Options
    #2
    Webmonkey
    Registered Users 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.


  • Options
    #3
    ocallagh
    Registered Users Posts: 3,140 ✭✭✭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