admin管理员组

文章数量:1405311

I have an image and each time I click on it I want to make it rotate 180 degrees. This is the code I tried:

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

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

This code does not work for some reason. Any ideas why the above code does not work?

I have an image and each time I click on it I want to make it rotate 180 degrees. This is the code I tried:

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

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

This code does not work for some reason. Any ideas why the above code does not work?

  • javascript
  • jquery
Share Improve this question edited Dec 6, 2016 at 9:18 Rory McCrossan 338k41 gold badges320 silver badges351 bronze badges asked Dec 6, 2016 at 9:03 MichaelMichael 13.6k59 gold badges170 silver badges315 bronze badges 2
  • Go through this stack overflow link may be it can help you. – Shubham Baranwal Commented Dec 6, 2016 at 9:06
  • 1 Possible duplicate of CSS rotation cross browser with jquery.animate() – Justinas Commented Dec 6, 2016 at 9:10
Add a ment  | 

7 Answers 7

Reset to default 4

Firstly note that your issue is because the selector is incorrect. It should be $('#showLayers') not $('#showLayers img') - or even just $(this) as you're in the scope of the click handler.

Secondly, note that you can improve the logic by using CSS for the animation and simply toggling the class in JS as needed:

$('#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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="showLayers" class="miniToolbarContant" src="https://i.imgur./J5YLlJvl.png" width="250" />

<html>
<head>
<script src="https://ajax.googleapis./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>

Ok you can use the jquery css methods with rotate. With a variable you increm, your pictures rotate at 360 deg (180 by 180).

Please try:

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="showLayers" class="miniToolbarContant" src="https://i.imgur./J5YLlJvl.png" width="250" />

the .animate() method in jQuery accepts only integers as a value to a property so "180deg" is invalid instead create a class and toggle it

$(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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="a"></div>

Try this code :

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

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

});

There are many ways to do this. Below is one of the way:

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/1464bgn2/

Change showLayers img to #showLayers.

Also rotate: 180 isn't valid styling. See this answer for how to rotate a div.

本文标签： javascriptHow to rotate an image on clickStack Overflow

版权声明：本文标题：javascript - How to rotate an image on click - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744310302a2599994.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。