Question

99

Rotate image with onclick

rated 0 times [ 101] [ 2] / answers: 1 / hits: 30383 / 12 Years ago, fri, january 18, 2013, 12:00:00

I try to make a toggle button where my image (an arrow) will be rotated by 180 degrees each click:

<a href='#' onclick='$(#divToggle).slideToggle(slow);'>

<img src='blue_down_arrow.png' onclick='$(this).rotate(180);' /></a>



<div id='divToggle' style='display:none;'>...CONTENT...</div>;

This code toggle my div but the image rotates only for the first click and then stays up. I am using this : http://code.google.com/p/jqueryrotate/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

theron

Add To Favorites

Follow

Total Points: 168

Total Questions: 93

Total Answers: 94

Location: South Georgia

Member since Fri, Nov 13, 2020

4 Years ago

theron questions

1 vuejs3 reactivity of props object

Sat, Jan 8, 22, 00:00, 2 Years ago

1 Error: Cannot read properties of undefined (reading 'props') in ReactJS

Sat, Sep 25, 21, 00:00, 3 Years ago

1 Why does setState callback throw an error: State updates from the useState() and useReducer() Hooks don't support the second callback argument...

Fri, Aug 6, 21, 00:00, 3 Years ago

1 Why is this undefined in Vue Composition API setup function?

Wed, Jul 22, 20, 00:00, 4 Years ago

1 How to make a bot know how to delete webhooks that it made and by channel mentions

Fri, Jul 5, 19, 00:00, 5 Years ago

View All

answered 12 Years ago nikokorbinm · Accepted Answer

This is because the value for rotate angle is absolute, not based on the last rotate.

Working code:

jQuery

var rotate_factor = 0;



function rotateMe(e) {

    rotate_factor += 1;

    var rotate_angle = (180 * rotate_factor) % 360;

    $(e).rotate({angle:rotate_angle});

}

HTML

<img src='blue_down_arrow.png' onclick='rotateMe(this);' /></a>

Update: Shorter code

var rotate_angle = 0;



<img src='blue_down_arrow.png' onclick='rotate_angle = (rotate_angle + 180) % 360; $(this).rotate(rotate_angle);' /></a>