jQuery - how to “reset” a .css() rotated icon?


Tags: jquery,css,rotation,icons

Problem :

I have an icon, which is rotated on click.

I'd like to "reset" it (without a page refresh), so it would rotate on every click.

$('#icon').click(function(){
    $(this).css('transform','rotate(360deg)');
});

Here is the example: http://jsfiddle.net/tDvD9/1/

Thanks!



Solution :

Here's one simple way:

var r = 0;
$('#icon').click(function(){
    $(this).css('transform','rotate(' + (r += 360) + 'deg)');
});

That way your "transform" property will change on each click (until somebody clicks 100 million times or so).


    CSS Howto..

    How to keep a sticky menu contained inside a floating sidebar?

    How to call apk font use CSS in android?

    How to center images in div

    How do you extend a Django project root HTML file in project apps?

    How to change header and footer to full width

    jQuery hide() and show() not working as expected

    How do I keep a CSS hover rule applied when the mouse moves to the child element?

    how to make password textbox value visible when hover an icon

    css how to make the div width just for the content

    HTML/CSS How to have to tags on same line?

    How to get all blue background divs to align to the left and get all the red divs to align to the right using the css float property?

    HTML4 strict: border=“0” is deprecated, how to replace it

    How to Scale Down a Large Image Using HTML and/or CSS

    how to show the hidden div with same properties css with jquery

    CSS/Menu: How to position element right below/beside elements

    How to make div's inside div responsive

    How to overlay images with css (cross-browser)

    How to override the width property in css [closed]

    When and how to use !important CSS property in a bookmarklet with cross domains?

    How to specifiy the order of CSS classes?

    How do I code CSS to “change” when I load/pull content using ajax?

    How to animate a height change using javascript and css?

    How to do a workaround in css that removes spacing in footer of navigator7 vaadin addon

    How do i rotate text in css

    How can I center three tables in a div?

    how do I select in css so the items appears in hover state In entire page(mega menu)

    How to stylize left part of input range in Metro Apps?

    how fix bug with white lines between the cells of the table in IE11

    css3 : how to make div go up to bottom of page?

    How to load external css in CakePHP?