CODEWITHSUNDEEP
javascriptjquerycssjquery-transit
mmmoustache
mmmoustache

Reputation: 2323

Restrict jQuery/CSS3 rotate logic to always rotate clockwise

I'm using the jQuery transit plugin to rotate a block element with 4 navigation controls; each time a nav item is clicked, the rotated block should rotate to the custom data attribute of that nav item (either 0, 90, 180 or 270 degrees).

I can successfully do this (see my jsfiddle: http://jsfiddle.net/xkdgdhbk/, only tested in chrome), but I would like to restrict the rotation to ALWAYS go clockwise. As you can see, if you click 180deg it will go clockwise, but then if you click 90deg, it will go anti-clockwise. I would like the element to rotate clockwise at all times, if possible.

Is there a way to achieve this?

Here's my script from the jsfiddle:

$("span").click(function(){
    $(".rotate").transition({ rotate: $(this).attr("data-rotate") + "deg"});
});

Upvotes: 0

Views: 366

Answers (1)

Mukesh Agarwal
Mukesh Agarwal

Reputation: 528

You can store the previous rotate value in the $(.rotate) element and use it for each rotation something like this

$().ready(function()
{
    $("span").click(function()
    {
        var lastRotate = $(".rotate").attr("data-rotate");
        if(lastRotate ==undefined)
        {
            lastRotate = 0;
        }
        lastRotate = parseInt(lastRotate);
        var newRotate = lastRotate + parseInt($(this).attr("data-rotate"));
        $(".rotate").transition({ rotate:newRotate  + "deg"}).attr("data-rotate",newRotate);
    });
});

Upvotes: 1

Related Questions