jQuery实现点击旋转，再点击恢复初始状态动画效果示例

当网站需要实现点击旋转，再点击恢复初始状态的动画效果时，我们可以使用jQuery实现。下面是具体的操作步骤：

1. 引入jQuery

在HTML文件中引入jQuery库，可以使用cdn或下载之后放在本地。比如：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. 编写HTML结构

在HTML中编写需要实现旋转动画的元素，并设置对应的类名或id。比如：

<div class="box"></div>

3. 编写CSS样式

为需要实现旋转动画的元素设置初始样式，比如宽度、高度、背景色等，并设置旋转的动画效果。比如：

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  transition: transform 0.5s ease;
}

4. 编写jQuery代码

为元素绑定点击事件，并在事件中判断当前元素的旋转状态，如果是旋转状态则恢复到初始状态，否则旋转180度。

示例1

$('.box').click(function() {
  if ($(this).hasClass('rotate')) {
    // 还原旋转前的样式
    $(this).removeClass('rotate');
  } else {
    // 设置旋转后的样式
    $(this).addClass('rotate');
  }
});

需要在CSS中添加.rotate类，并为其设置旋转样式，如下：

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

示例2

$('.box').toggle(
  function(){
    $(this).addClass('rotate');
  },
  function(){
    $(this).removeClass('rotate');
  }
);

5. 完成

以上步骤完成后，即可实现点击旋转，再次点击恢复初始状态这一动画效果。