Jquery

Question

I want to rotate a wheel of random numbers using jquery animate function,not understanding how to do it.Please do let me know about the solution

Karthikeyan K · Answer

Hi Aniket, Refer the link :http://jsfiddle.net/KarthikeyanK/wsL9cydy/# If it is useful then accept my answer

Aniket Narvankar · Answer

$(function () { function AnimateRotate(d) { // caching the object for performance reasons var $elem = $('#wheel3'); // we use a pseudo object for the animation // (starts from `0` to `angle`), you can name it as you want $({ deg:0}).animate({ deg: d }, { duration: 6000, step: function (now) { // in the step-callback (that is fired each step of the animation), // you can use the `now` paramter which contains the current // animation-position (`0` up to `angle`) $elem.css('-webkit-transform', 'rotate(' + now + 'deg)'); $elem.css('transform', 'rotate(' + now + 'deg)'); $elem.css('-sand-transform', 'rotate(' + now + 'deg)'); } }, 'swing'); } //Rotate when button / link is pressed $("#betok").click(function () { var amount = Math.floor(Math.random() * 10); var d = (360 - amount * 36) + 2520; AnimateRotate(d); }); }); Sir, I have written the following code,the wheel is rotating,and it stops at a random number,but the rotation occurs as first it rotates slow,then fast,then slows down and stops.instead of that i want it to rotate first fast,then slow down and stop at the random number.duration given is 6000 because i want it to rotate it for 6 seconds,which is also rotating.

Karthikeyan K · Answer

Yeah Okay Aniket..I hope it useful for you.. Happy coding Cheers!!

Aniket Narvankar · Answer

Thank you Karthikeyan Sir,wait I am trying,I am not Sir.Call me Aniket

Karthikeyan K · Answer

Hi Aniket sir, If it is useful then accept my answer Karthikeyan K

Karthikeyan K · Answer

Hi sir, Live Demo : https://jsfiddle.net/KarthikeyanK/xtocyn2c/embedded/result/ HTML 1 2 3 4 5 6 7 8 9 10 CSS @keyframes circle { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } body { background-color: Aquamarine; } @keyframes inner-circle { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } } #rot { width:350px; height:350px; margin:20px auto; font-size:16px; line-height:1; animation: circle 25s linear infinite; transform-origin: 50% 50%; } #rot > div { animation: inner-circle 25s linear infinite; width:50px; height:50px; } JQUERY $("document").ready(function(){ var block = $("#rot div").get(), increase = Math.PI * 2 / block.length, x = 0, y = 0, angle = 0; for (var i = 0; i var elem = block[i]; x = 140 * Math.cos(angle) + 150; y = 140 * Math.sin(angle) + 150; elem.style.position = 'absolute'; elem.style.left = x + 'px'; elem.style.top = y + 'px'; var rot = 90 + (i * (360 / block.length)); angle += increase; } }); OUTPUT

Pradeep · Answer

Try this. $(function() { var $elie = $("img"), degree = 0, timer; rotate (); function rotate() { $elie .css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); $elie .css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); timer = setTimeout(function(){ ++degree; rotate(); },5); } $ ("input").toggle(function() { clearTimeout (timer); }, function() { rotate (); }); });

Jquery

Answers (7)