CODEWITHSUNDEEP
javascriptjqueryrotation
JGuerra
JGuerra

Reputation: 21

Jquery rotation rotate img on click

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

Upvotes: 1

Views: 1174

Answers (2)

lipp
lipp

Reputation: 5926

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>

Upvotes: 2

wrldbt
wrldbt

Reputation: 181

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

Upvotes: 0

Related Questions