Question

我有一个按钮，如果我点击旋转到25度，我使用Jquery实现了这一点。但现在我想要，如果我再次点击它，它会进入其原始状态。这就是我得到的：

$(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;



        });
    });

});

如您所见，我尝试添加：

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

第一次轮换后

。

Answer 1

您可以使用标志来确定它是否旋转。这是一个例子：

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 e.g.

Answer 5

使用以下简单方法检查元素是否已被转换：

$(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/

Jquery按钮返回原始状态

5 个答案: