CODEWITHSUNDEEP
javascriptjqueryhtmlcssrotation
WIRN
WIRN

Reputation: 947

Rotate with jQuery, remember position

I'm rotating a div like in the code bellow. The problem is that I don't know how to make the element continue from the last position when I click it again. How do I do that? (I was able to do it in a way that didn't work in IE)

JSFiddle

HTML:

<div class="square">click me</div>

CSS:

.square {
    background:red;
    height:100px;
    width:100px;
    cursor:pointer;
}

JS:

$('.square').click(function () {
    rotate($(this), -180, 1000);
});

function rotate(element, degrees, speed) {
    element.animate({
        borderSpacing: degrees
    }, {
        duration: speed,
        step: function (now, fx) {
            $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
            $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
            $(this).css('transform', 'rotate(' + now + 'deg)');
        }
    });
}

Upvotes: 0

Views: 237

Answers (2)

WIRN
WIRN

Reputation: 947

Sorry, Illaya, I unclicked your answer because I manage to do it without external jquery code. I changed the JS to:

$(document).ready(function () {


$('.square').click(function () {
       if ($(this).hasClass('folded')) {
            $(this).removeClass('folded');
            rotate($(this), 0, 700);
        } else {
            $(this).addClass('folded');
            rotate($(this), 180, 700);
        }
});

    function rotate(element, degrees, speed) {
        element.animate({
            borderSpacing: degrees
        }, {
            duration: speed,
            step: function (now, fx) {
                $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
                $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
                $(this).css('transform', 'rotate(' + now + 'deg)');
            }
        });
    }
});

Updated JSFiddle

Upvotes: 0

Illaya
Illaya

Reputation: 666

You can use the jQueryRotator...

and use the js code...

var value = 0
$("#image").rotate({ 
   bind: 
     { 
        click: function(){
            value +=90;
            $(this).rotate({ animateTo:value})
        }
    }    
});

and the working fiddle is... http://jsfiddle.net/se4xc/ Hope this will work you.

Upvotes: 1

Related Questions