1

I'm trying to do a clock with css rotate and jquery. The rotate part is done, but now i have to do a spin in the clock and stop at the time of computer's user.

The part i can't do is the spin and stop at the right time. My code, now, is:

function horario(){
    var now = new Date();
    var hour = now.getHours();
    var minutes = now.getMinutes();

    var hourDegraus = hour * 30;
    var minuteDegraus = minutes * 6;

    $(".pont-hour").css({ WebkitTransform: 'rotate(' + hourDegraus + 'deg)'});
    $(".pont-hour").css({ '-moz-transform': 'rotate(' + hourDegraus + 'deg)'});
    $(".pont-hour").css({ 'transform': 'rotate(' + hourDegraus + 'deg)'});
    $(".pont-minutes").css({ WebkitTransform: 'rotate(' + minuteDegraus + 'deg)'});
    $(".pont-minutes").css({ '-moz-transform': 'rotate(' + minuteDegraus + 'deg)'});
    $(".pont-minutes").css({ 'transform': 'rotate(' + minuteDegraus + 'deg)'});
}

Basically, i want to do a spin and in the end the pointers stop at the time in variables hourDegraus and minuteDegraus.

Any idea how i can do the spin?

Uros K
  • 3,274
  • 4
  • 31
  • 45
user3642593
  • 23
  • 1
  • 6
  • Take a look at this question: http://stackoverflow.com/questions/15191058/css-rotation-cross-browser-with-jquery-animate – frenchie Jun 23 '14 at 18:05
  • Also, frenchie's link points out that vendor prefixes are automatically applied in jQuery 1.8+. – MiniRagnarok Jun 23 '14 at 18:13
  • @frenchie Wow, i take a look at this question and i can do the effect with this: http://stackoverflow.com/a/15191130/3642593 . Unfortunately, the effect is too "fast" and i can't add some animate (duration) or something. There's a way? – user3642593 Jun 23 '14 at 18:27
  • just change the duration property and add some more time if needed; for now it's set at 2000. – frenchie Jun 23 '14 at 18:36
  • @frenchie Hmm, i'm using this code: http://jsbin.com/ofagog/2/edit and don't have a duration time :(. Maybe i got the wrong code? – user3642593 Jun 24 '14 at 11:55
  • Yes, you're missing the duration; just insert the line "duration: 5000," right above the line "step: function(now, fx){" Like this: http://jsbin.com/puxezosa/1/edit – frenchie Jun 24 '14 at 12:04

0 Answers0