Jquery

Question

I want to rotate a wheel of random numbers using jquery animate functionnot 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 codethe wheel is rotatingand it stops at a random numberbut the rotation occurs as first it rotates slowthen fastthen slows down and stops.instead of that i want it to rotate first fastthen slow down and stop at the random number.duration given is 6000 because i want it to rotate it for 6 secondswhich is also rotating.

Karthikeyan K · Answer

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

Aniket Narvankar · Answer

Thank you Karthikeyan Sirwait I am tryingI 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 (); }); });