jquery rotate function not working

Question

Hi guys at the moment i am trying to figure out how to rotate a div and make it stop at a loctation. I have had some help on this however iam not sure what iam doing wrong. Any help with the code would be great.

<script type="text/javascript">
var $elie = $("#super");
rotate(1);

function rotate(degree) {
$elie.css({
    WebkitTransform: 'rotate(' + degree + 'deg)'
});
$elie.css({
    '-moz-transform': 'rotate(' + degree + 'deg)'
});

if (degree < 1196) {
    timer = setTimeout(function() {
        rotate(++degree);
    }, 1);
}
}

You don't assign to the unprefixed version? The unprefixed version is used by IE, Firefox, and Opera. — Šime Vidas
– Šime Vidas, Commented Nov 29, 2012 at 0:41
Sorry still dont get u. Maybe if u give me an example i could try it out and see what u mean — TheEagle
– TheEagle, Commented Nov 29, 2012 at 0:47

Ron Gilchrist · Accepted Answer · 2012-11-30 23:10:20Z

Here is a reusable version that I got working. Hope it helps you out.

$(function () {

    var rotateAnimation = function (props) {
        // init animation props
        var rotateEl = props.el,
            curAngle = props.startAngle,
            endAngle = props.endAngle;
        // scope angle to parent function
        var angleValue = 'rotate(' + curAngle + 'deg)';

        // define worker function
        var rotate = function () {
            // increment the angle
            curAngle += props.increment;

            // see if we are done animating
            if (curAngle >= endAngle) {
                curAngle = endAngle;
                clearInterval(timer);//stop looping

            }
            // create css value 
            angleValue = 'rotate(' + curAngle + 'deg)';
            rotateEl.css({
                '-moz-transform': angleValue,
                '-webkit-transform': angleValue,
                '-o-transform': angleValue,
                '-ms-transform':angleValue
            });
        };

        var timer = setInterval(rotate, props.delay);//let the fun begin
    };

    $('#super').on('click', function () {
        rotateAnimation({
            el: $(this),
            startAngle: 0,
            endAngle: 1234,
            delay: 1,
            increment: 3
        });
    });

});

Benjamin Powers · Accepted Answer · 2012-11-29 00:57:42Z

1

It looks like it is rotating and stopping, but the value of 1196 takes a while to get to. Here's a jsfiddle with what's going on. http://jsfiddle.net/2x3Us/

Html:

<div id="super" style="background-color: red">hello</div>

Javascript:

var $elie = $("#super");
rotate(1);

function rotate(degree) {
    $elie.css({
        '-ms-transform': 'rotate(' + degree + 'deg)',
        '-webkit-transform': 'rotate(' + degree + 'deg)',
        '-o-transform': 'rotate(' + degree + 'deg)',
        '-moz-transform': 'rotate(' + degree + 'deg)'
    });

    console.log(degree);
    if (degree < 360) {
        timer = setTimeout(function() {
            rotate(++degree);
        }, 1);
    }
}

edited Nov 29, 2012 at 0:57

answered Nov 29, 2012 at 0:43

Benjamin Powers

3,2862 gold badges20 silver badges23 bronze badges

8 Comments

TheEagle Over a year ago

still dose not work. Can i ask what libarys i need 2 use to use this function?

Benjamin Powers Over a year ago

do you not see the div being rotated? Try it now... I added a background color to make it clear.

TheEagle Over a year ago

The div i got dose not even rotate those. Thats the problem

Benjamin Powers Over a year ago

Did you look at the link that I put in the answer? In regard to a library, you need to have jquery included.

Benjamin Powers Over a year ago

what browser are you using?

|

Collectives™ on Stack Overflow

jquery rotate function not working

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related