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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><imgclass="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);
}

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

Solution 4:

Find below the working code:

<!-- Image rotating by default --><divstyle="width:50%; margin:0 auto; text-align:center"><h3>Image rotating by default</h3><imgheight="60"width="60"src="images/js.png"class="auto-rotation"><imgheight="60"width="60"src="images/jquery.png"class="auto-rotation"></div><!-- End Image rotating by default --><!-- Image rotation manually --><divstyle="width:50%; margin:0 auto; text-align:center"><h3>Image rotation manually</h3><imgheight="60"width="60"src="images/js.png"class="auto-rotation2"><imgheight="60"width="60"src="images/jquery.png"class="auto-rotation2"><div><buttonid="start">Start Rotation</button><buttonid="stop">Stop Rotation</button></div></div><!-- End Image rotation manually --><scriptsrc="jquery.min.js"></script><scriptsrc="jQueryRotate.js"></script><script>

$(function() {

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


// Image rotation manuallyvar 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);
}

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