CODEWITHSUNDEEP
jqueryanimationtransform
Somsekhar Dash
Somsekhar Dash

Reputation: 35

Transform with jQuery is not working

I am trying to use animation transform using jQuery for a clock. But it is not working .. I have written code like:

var now = new Date();
var hr = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
hr = hr % 12;
hr = hr * 30;
$('#hour').animate({
    step: function (hr) {
        $(this).css('-webkit-transform', 'rotate(' + hr + 'deg)');
    },
    duration: 10
}, 'linear');

for more information please see my JSFiddle

Upvotes: 1

Views: 1915

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

Your parameter order is messed up, hopefully what you are looking for is

$(document).ready(function () {
    var now = new Date();
    var hr = now.getHours();
    var min = now.getMinutes();
    var sec = now.getSeconds();
    hr = hr % 12;
    hr = hr * 30;
    $('#hour').animate({
        transform: hr
    }, {
        step: function (hr) {
            $(this).css('-webkit-transform', 'rotate(' + hr + 'deg)');
        },
        duration: 1000
    }, 'linear');
});

Demo: Fiddle

Upvotes: 6

Related Questions