Question

我有一张图片，每次点击它我想让它旋转180度。这是我试过的代码：

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

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

此代码由于某种原因不起作用。有什么想法为什么上面的代码不起作用？

Answer 1

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

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

＆＃13;

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

＆＃13;

#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);
}

＆＃13;

<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" />

＆＃13;

Answer 2

jQuery中的.animate()方法只接受整数作为属性的值，因此“180deg”无效而是创建一个类并切换它

$(document).on('click', ".a", function() {
  $(".a").toggleClass('a_rotated');
})

.a {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.2s ease-in-out;
}
.a_rotated {
  transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="a"></div>

Answer 3

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    var rot =180;
    function rotateImage(test){
        test.style.webkitTransform="rotate("+rot+"deg)";

    }
</script>
</head>
<body>

<div id="imgWrapper">
    <img src="test.png" id="image" onclick="rotateImage(this)">  
</div>

</body>
</html>

Answer 4

好的，您可以将jquery css方法与rotate一起使用。使用变量递增，您的图片以360度（180 x 180）旋转。

请尝试：

var angle = 0;
$('#showLayers').click(function() {
  angle += 180
  $(this).css('-webkit-transform','rotate('+angle+'deg)'); 
});

#showLayers {
  transition: transform 0.3s;
}

<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" />

Answer 5

试试这段代码：

$('#showLayers').click( function() {

    $('#showLayers img').css('transform', 'rotate(180deg)');

});

Answer 6

有很多方法可以做到这一点。以下是其中一种方式：

var inti = 180;

$('img').click(function(){     
     var rotate = "rotate(" + inti + "deg)";
            var trans = "all 0.3s ease-out";
    $(this).css({
         "-webkit-transform": rotate,
                "-moz-transform": rotate,
                "-o-transform": rotate,
                "msTransform": rotate,
                "transform": rotate,
                "-webkit-transition": trans,
                "-moz-transition": trans,
                "-o-transition": trans,
                "transition": trans
    });
    inti += 180;
});

DEMO：https://jsfiddle.net/1464bgn2/

Answer 7

将showLayers img更改为#showLayers。

rotate: 180也不是有效的样式。有关如何旋转div的信息，请参阅this answer。

如何在点击时旋转图像

7 个答案: