jquery使用animate旋转图片会旋转回来

tomrsun

于 2021-10-29 10:19:06 发布

阅读量1.1k

点赞数

文章标签： jquery 动画 css3

本文链接：https://blog.csdn.net/tomrsun/article/details/121029292

版权

本文探讨了如何解决jQuery animate方法在图标旋转动画中遇到的问题，通过CSS3的transform属性结合`.station-icon`类实现平滑旋转效果，避免了旋转后的自动回转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为需要做一个图标的旋转，就想到jquery的animate，于是直接使用

$(".station-icon")[n].animate({transfrom:"rotate(180deg)"}, 500)

问题来了，图片旋转后又自己转回来了，看来animate是不行的，那就直接用css

.station-icon {
     width: 15px;
      position: absolute;
      top: 5px;
      right: 5px;
      transition: all 0.5s;
      transform: rotate(0deg);
  }

然后直接设置样式

$(".station-icon")[n].style.transform = "rotate(180deg)";

现在就可以实现旋转动画了