jQuery按钮恢复到原始状态

Question

I have a button which if i click rotates to 25deg, I achieved this using Jquery. But now I want that if i click it again that it goes to its original state. This is what I got:

$(document).ready(function() {

    $(function() {
        $('.fa-plus-circle').click(function() {

            $(this).prev('p').slideToggle();

            $(this).css('transform', 'rotate(20deg)');

            $(this).css('transform', 'rotate(-20deg)');

            return false;



        });
    });

});

As you can see i tried adding:

 $(this).css('transform', 'rotate(-20deg)');

right after the first rotation.

Answer 1

You can use a flag to determine whether it is rotated or not. Here is an example:

 var rotated = false; $('button').click(function() { $(this).css('transform', rotated ? 'rotate(0deg)' : 'rotate(20deg)'); rotated = !rotated; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Button</button> 

Answer 2

 $(document).ready(function() { $(function() { $('.fa-plus-circle').click(function() { $(this).toggleClass('rotated'); return false; }); }); }); 

 .fa-plus-circle { background: blue; height: 50px; width: 50px; margin: 10px; } .fa-plus-circle.rotated { transform: rotate(20deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fa-plus-circle"></div> 

Answer 3

Use this:

$(function() {
  $('.fa-plus-circle').click(function() {

    var el = $(this);

    el.prev('p').slideToggle();

    if(el.hasClass('active')) {
      el.css('transform', 'rotate(0deg)');
    } else {
      el.css('transform', 'rotate(20deg)');
    }

    el.toggleClass('active');

    return false;
  });
});

Answer 4

<button class="fa-plus-circle">
    Hello
</button>

$(document).ready(function() {
    var rotated = false;  
    $('.fa-plus-circle').click(function() {
    if(rotated === false) {
      $(this).css('transform', 'rotate(20deg)');
      rotated = true;
    } else {
        $(this).css('transform', 'rotate(0deg)');
        rotated = false;
    }

    return false;
  });
});

jsfiddle eg

Answer 5

Use the following simple approach to check if an element has been transformed:

 $(document).ready(function() { $(function() { $('.fa-plus-circle').click(function() { $(this).prev('p').slideToggle(); var transformed = $(this).css('transform') !== "none"; $(this).css('transform', (transformed)? 'none': 'rotate(-20deg)'); return false; }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <button class="fa-plus-circle">hello</button> 

https://jsfiddle.net/9ppgbsb0/