Rotate An Image 180 Degrees On Click With Jquery With Animation

I'm making a drop down navigation and I would like to use an arrow that rotates to toggle it. I have this https://jsfiddle.net/jaUJm/39/ $(document).ready(function() { $( '.toggle'

Solution 1:

You can use toggleClass

$(document).ready(function() {
    $( ".toggle" ).click( function() {
        $("#image").toggleClass('flip');
    });
});

#image {
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

.flip {
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<img class="toggle" id="image" src="https://i.imgur.com/uLlPUfM.png"/>

Solution 2:

May change

$("#image").css({'transform': 'rotate(-180deg)'});

to

$("#image").toggleClass('flip');

Solution 3:

You already got the other answer regarding the toggleClass, but none of them explain the problem you have.

You successfully set the transform of the element to -180deg once you click, but your problem is that on the second click - you don't add another -180deg to that element. You only set (again) the value of -180deg to the transform attribute (which actually does nothing, because this you already have -180deg on that element).

You can fix this using the one of the other toggleClass examples (which would work great) and you can also check if the current value of transform is none, and if that's the case - set the -180deg, otherwise - reset it:

$(document).ready(function() {
  $( ".toggle" ).click( function() {
    console.log($("#image").css('transform'));
    if ($("#image").css('transform') == 'none') {
      $("#image").css({'transform': 'rotate(-180deg)'});
    } else {
      $("#image").css({'transform': ''});
    };
  });
});

#image {
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

.flip {
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<img class="toggle" id="image" src="https://i.imgur.com/uLlPUfM.png"/>

Solution 4:

Find below the working code:

<!-- Image rotating by default -->
<div style="width:50%; margin:0 auto; text-align:center">
<h3>Image rotating by default</h3>
<img height="60" width="60" src="images/js.png" class="auto-rotation">
<img height="60" width="60" src="images/jquery.png" class="auto-rotation">
</div>
<!-- End Image rotating by default -->

<!-- Image rotation manually -->
<div style="width:50%; margin:0 auto; text-align:center">
<h3>Image rotation manually</h3>
<img height="60" width="60" src="images/js.png" class="auto-rotation2">
<img height="60" width="60" src="images/jquery.png" class="auto-rotation2">
<div><button id="start">Start Rotation</button> <button id="stop">Stop Rotation</button></div>
</div>
<!-- End Image rotation manually -->

<script src="jquery.min.js"></script>
<script src="jQueryRotate.js"></script>
<script>

$(function() {

// Image rotating by default
var angle = 0;
setInterval(function(){
angle+=2;
$(".auto-rotation").rotate(angle);
},10);


// Image rotation manually
var ang = 0;
$("#start").click(function() {

window.st = setInterval(function(){
   ang+=4;
   $(".auto-rotation2").rotate(ang);
   },10);
});

$("#stop").click(function() {
clearInterval(window.st);
});
// End Example-3

});

</script>

For detailed working demo code click here

Solution 5:

Just use this easy method!

$(document).ready(function() {
  $( ".toggle" ).click( function() {
    console.log($("#img").css('transform'));
    if ($("#img").css('transform') == 'none') {
      $("#img").css({'transform': 'rotate(-180deg)'});
    } else {
      $("#img").css({'transform': ''});
    };
  });
});

#img {
  -moz-transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s;
}

.flippingImage {
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<img class="toggle" id="img" src="https://i.imgur.com/uLlPUfM.png"/>