jquery旋转动画

jQuery 旋转动画实现方法

使用 jQuery 实现旋转动画可以通过 CSS transform 属性结合 jQuery 的动画方法。以下是几种常见实现方式：

使用 CSS 和 jQuery 的 .animate()

通过 jQuery 的 .animate() 方法动态修改 CSS transform 属性实现旋转效果：

$("#element").animate({
  rotate: '360deg'
}, {
  duration: 1000,
  step: function(now, fx) {
    $(this).css('transform', 'rotate(' + now + 'deg)');
  }
});

使用 .css() 直接修改 transform

通过 jQuery 直接修改 CSS 的 transform 属性：

$("#element").css({
  'transform': 'rotate(45deg)',
  'transition': 'transform 1s ease'
});

使用 jQuery UI 扩展

jQuery UI 扩展了 .animate() 功能，支持直接旋转动画：

$("#element").animate({
  rotate: 180
}, 1000);

需要先引入 jQuery UI 库：

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

使用 CSS 类切换

通过 jQuery 切换 CSS 类实现旋转动画：

.rotate-animation {
  transform: rotate(180deg);
  transition: transform 1s;
}

$("#element").addClass('rotate-animation');

注意事项

• 旋转中心默认是元素中心，可通过 transform-origin 调整
• 考虑浏览器兼容性，可能需要添加前缀如 -webkit-transform
• 连续旋转时需清除之前的变换状态