Question

这就是我想要的简单

我想在有人点击它时旋转（180）图像（arow.png）。然后，当用户第二次点击它时，我希望它重置。

现在我使用的是一个带css的简单JS，但是用css我无法重置它。任何人都可以帮忙。我是编码的新手。

jQuery(document).ready(function(){
jQuery(".footer-button").click(function(){
jQuery(".footer-popup").slideToggle("slow");

 jQuery(".footer-button").css({
   "transform":"rotate(180deg)",
   "-webkit-transform": "rotate(180deg)",
   "-moz-transform": "rotate(180deg)",
   "-ms-transform": "rotate(180deg)",
   "-o-transform": "rotate(180deg)",
   "transition":"transform 0.5s ease-in-out"});

  });
});

Answer 1

现在你正在做的是在点击时向(".footer-button")添加CSS。相同的CSS将添加到按钮第二，第三等时间点击它。因此，无论您点击多少次，按钮都不会被重置。

您可能会认为再次给予元素"transform":"rotate(180deg)"会再次旋转180度。这是对CSS3 transform如何运作的一种巨大误解。

"transform":"rotate(180deg)"真正做的是使元素处于相对于其原始旋转（0度）旋转180度的状态。要将元素恢复为原始状态，请删除"transform":"rotate(180deg)"或将CSS更改回"transform":"rotate(0deg)"。

在JavaScript中，您需要自己实现它，以便在第二次单击时再次更改CSS。可以使用布尔变量和if语句轻松完成，如下所示：

var clicked = false;

$(".footer-button").click(function(){
  var deg = clicked ? 0 : 180;  
  //when it is not clicked, rotates 180 deg, else rotates 0 deg.
  this.css({
    "transform":"rotate("+deg+"deg)",
    "-webkit-transform": "rotate("+deg+"deg)",
    "-moz-transform": "rotate("+deg+"deg)",
    "-ms-transform": "rotate("+deg+"deg)",
    "-o-transform": "rotate("+deg+"deg)"
  });
  clicked = !clicked;
})

如果您希望第二次旋转是顺时针运动，则需要将其设置为360而不是0。

哦，你不必在JS中设置"transition":"transform 0.5s ease-in-out"。您可以在CSS文件中使用它。

Answer 2

看看这个简单的HTML5代码：

<!DOCTYPE html>
<head>
<style>
.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;

    }   
.rotate:hover   
{ 
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}   
</style>
</head>
<body>
<img src="arrow.png" class="rotate" />
</body>
</html>

添加您的图片而不是arrow.png。您可以将度数从360更改为180.

希望它会帮助你.. 谢谢！

单击并再次重置时，Jquery旋转图像

2 个答案: