javascript - 如何在点击时旋转图像

我有一张图片，每次单击它都想使其旋转180度。这是我尝试的代码：

<img id="showLayers" class="miniToolbarContant" src="../stdicons/GeomindIcons/slide.png"/>

$('#showLayers').click( function() {
    $('#showLayers img').animate({ rotate: 180 });
});

由于某些原因，此代码无法正常工作。有什么想法为什么上面的代码不起作用？

最佳答案

首先请注意，您的问题是因为选择器不正确。它应该是$('#showLayers')而不是$('#showLayers img')-甚至只是$(this)，因为您属于点击处理程序的范围。

其次，请注意，您可以通过将CSS用于动画并根据需要简单地在JS中切换类来改善逻辑：

$('#showLayers').click(function() {
  $(this).toggleClass('rotate');
});

#showLayers {
  transition: transform 0.3s;
}

.rotate {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="showLayers" class="miniToolbarContant" src="https://i.imgur.com/J5YLlJvl.png" width="250" />