使用jQuery实现点击旋转图像180度的动画效果

Question

我正在制作一个下拉式导航菜单，希望使用一个箭头进行旋转以切换它。

我有这个https://jsfiddle.net/jaUJm/39/

$(document).ready(function() {
$( ".toggle" ).click( function() {
    $("#image").css({'transform': 'rotate(-180deg)'});
});
});

我不确定如何使其重置，即在第二次和以后的点击时再次指向下方。

也许可以使用一个带有 .flip 类的：

.flip { transform: rotate(-180deg);}

然后使用 if() 和 addClass()/removeClass()？

谢谢！

- Tyler Cardenas

Answer 1

您可以使用toggleClass。

$(document).ready(function() {
    $( ".toggle" ).click( function() {
        $("#image").toggleClass('flip');
    });
});

#image {
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

.flip {
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<img class="toggle" id="image" src="https://i.imgur.com/uLlPUfM.png"/>

- Musa

---

请注意，使用addClass时，动画只会执行一次。toggleClass可以无限执行函数。 - Lisandro

Answer 2

可能会改变

$("#image").css({'transform': 'rotate(-180deg)'});

为了

$("#image").toggleClass('flip');

- Joey Zhang

Answer 3

关于 toggleClass，你已经得到了其他答案，但是它们都没有解释你的问题。

当你点击后成功地将元素的 transform 设置为 -180deg，但是你的问题在于第二次点击时 - 你没有向该元素添加另一个 -180deg。你只是再次将值设置为 -180deg 到 transform 属性（实际上这不起任何作用，因为你已经将 -180deg 应用到该元素上了）。

你可以使用其他 toggleClass 示例之一来解决这个问题（这将非常有效），还可以检查 transform 的当前值是否为 none，如果是，则设置为 -180deg，否则重置：

$(document).ready(function() {
  $( ".toggle" ).click( function() {
    console.log($("#image").css('transform'));
    if ($("#image").css('transform') == 'none') {
      $("#image").css({'transform': 'rotate(-180deg)'});
    } else {
      $("#image").css({'transform': ''});
    };
  });
});

#image {
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

.flip {
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<img class="toggle" id="image" src="https://i.imgur.com/uLlPUfM.png"/>

- Dekel

Answer 4

请看下方工作代码：

<!-- Image rotating by default -->
<div style="width:50%; margin:0 auto; text-align:center">
<h3>Image rotating by default</h3>
<img height="60" width="60" src="images/js.png" class="auto-rotation">
<img height="60" width="60" src="images/jquery.png" class="auto-rotation">
</div>
<!-- End Image rotating by default -->

<!-- Image rotation manually -->
<div style="width:50%; margin:0 auto; text-align:center">
<h3>Image rotation manually</h3>
<img height="60" width="60" src="images/js.png" class="auto-rotation2">
<img height="60" width="60" src="images/jquery.png" class="auto-rotation2">
<div><button id="start">Start Rotation</button> <button id="stop">Stop Rotation</button></div>
</div>
<!-- End Image rotation manually -->

<script src="jquery.min.js"></script>
<script src="jQueryRotate.js"></script>
<script>

$(function() {

// Image rotating by default
var angle = 0;
setInterval(function(){
angle+=2;
$(".auto-rotation").rotate(angle);
},10);


// Image rotation manually
var ang = 0;
$("#start").click(function() {

window.st = setInterval(function(){
   ang+=4;
   $(".auto-rotation2").rotate(ang);
   },10);
});

$("#stop").click(function() {
clearInterval(window.st);
});
// End Example-3

});

</script>

点击此处查看详细的工作演示代码

- Soni Kumari

---

嗨，欢迎来到stackoverflow！我们在这里喜欢解释。你能为这段代码提供一个吗？ - HoldOffHunger

Answer 5

只需使用这个简单的方法！

$(document).ready(function() {
  $( ".toggle" ).click( function() {
    console.log($("#img").css('transform'));
    if ($("#img").css('transform') == 'none') {
      $("#img").css({'transform': 'rotate(-180deg)'});
    } else {
      $("#img").css({'transform': ''});
    };
  });
});

#img {
  -moz-transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s;
}

.flippingImage {
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<img class="toggle" id="img" src="https://i.imgur.com/uLlPUfM.png"/>

- GucciBananaKing99