CODEWITHSUNDEEP
javascriptjquery
Tyler Cardenas
Tyler Cardenas

Reputation: 205

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" ).click( function() {
    $("#image").css({'transform': 'rotate(-180deg)'});
});
});

I'm just not sure how to make it reset, as in, complete the rotation so it's pointing down again when it's clicked the second and subsequent times.

Maybe a .flip class with

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

and use an if() and addClass()/removeCLass()?

Thank you!

Upvotes: 15

Views: 46395

Answers (5)

GucciBananaKing99
GucciBananaKing99

Reputation: 1506

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"/>

Upvotes: 0

Soni Kumari
Soni Kumari

Reputation: 116

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

Upvotes: 1

Musa
Musa

Reputation: 97727

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"/>

Upvotes: 19

Dekel
Dekel

Reputation: 62676

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"/>

Upvotes: 5

Joey Zhang
Joey Zhang

Reputation: 348

May change

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

to

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

Upvotes: 8

Related Questions