Restrict jQuery/CSS3 rotate logic to always rotate clockwise

Question

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"});
});

Answer 1

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);
    });
});