Jquery rotation rotate img on click

Question

Good evening. At the moment I am using jquery rotate plugin to allow an image to rotate as soon as clicked, the image rotates 180 degrees perfectly but once the button is clicked again to go back to the original position the image will keep the 180 degrees rotation and I can't figure out a way of putting it back to a 0 degree position. Can someone help? Here is the code:

HTML:

<div class="box_one">
        <div class="box_one_second" id="box-appear">
          <p>some text</p>
        </div>
        <button id="button-one"><img id="arrowdown"src="#"/>        </button>
</div>

JQUERY:

$(document).ready(function(){
        $("#button-one").click(function(){
          $(".box_one_second").toggle(200);
                $("#arrowdown").css('rotate',180);
        });
      });

I can see I'm only rotating it to 180 with this, how would I be able to reverse once the user clicks the button to go to the original pos. Thanks

lipp · Accepted Answer · 2016-04-21 19:50:08Z

2

I'd recommend to use jquery's toggleClass for adding/removing a class. Then you can control rotation with plain css.

img.rotate {
  transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src='http://lorempixel.com/400/200/' />
<button onclick="$('img').toggleClass('rotate')">Rotate</button>

edited Apr 21, 2016 at 19:50

answered Apr 21, 2016 at 19:42

lipp

5,9962 gold badges23 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JGuerra Over a year ago

Really useful, completely sorted. Thanks mate

wrldbt · Accepted Answer · 2016-04-21 19:49:29Z

0

Use a boolean to save whether or not the image has already been rotated.

$(document).ready(function(){

        var rotated = false;

        $("#button-one").click(function(){
        if(!rotated){
            $(".box_one_second").toggle(200);
            $("#arrowdown").css('rotate',180);
            rotated = true
        }
        else {
            // rotate back
            rotate = false;
        }
    });
});

answered Apr 21, 2016 at 19:49

wrldbt

1912 silver badges13 bronze badges

Collectives™ on Stack Overflow

Jquery rotation rotate img on click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related