How to make rotate occur more than once on click

Question

I'm using the following JQuery to insert css transitions into an element when clicked...

$(".menu-item-4828 > a").click(function(){
    $(".sub-menu").css("visibility", "visible");
    $(this).css({
        "-webkit-transform": "rotate(180deg) scale(0)",
        "-moz-transform": "rotate(180deg) scale(0)",
        "transform": "rotate(180deg) scale(0)",
        "-webkit-transition": "-webkit-transform 0.3s ease-in", 
    });

However this will only rotate the first time it is clicked, after that it won't rotate anymore. What can I do to make it so that it rotates everytime the element is clicked?

I tried adding and removing the class but this did not work.

Check this out http://stackoverflow.com/questions/15191058/css-rotation-cross-browser-with-jquery-animate — Sílvio N., Apr 13 '16 at 18:03

score 4 · Accepted Answer · answered Apr 13 '16 at 18:01

4

The problem appears to be that you're rotating it TO 180 degrees, not BY 180 degrees. Every time you're clicking it, you're setting it to rotation 180deg. You need to find out it's current rotation, add 180, then set it to that new value.

answered Apr 13 '16 at 18:01

Pedro

409
2
7

score 2 · Answer 2 · answered Apr 13 '16 at 18:04

Try to restore rotate position. In your case maybe is okay in that way (to remove style attribute):

    $(".menu-item-4828 > a").click(function(){
       $(".sub-menu").css("visibility", "visible");
       $(this).removeAttr('style').css({
           "-webkit-transform": "rotate(180deg) scale(0)",
           "-moz-transform": "rotate(180deg) scale(0)",
           "transform": "rotate(180deg) scale(0)",
           "-webkit-transition": "-webkit-transform 0.3s ease-in", 
       });
   )};

Good luck :)

How to make rotate occur more than once on click

2 Answers2