jquery - 如何在单击添加类时翻转元素？

Question

有人可以帮我制作一个翻转 div 的动画吗？更确切地说，我想用jquery添加一个单击类，该类在一个方向上对翻转进行动画处理，并在下一次单击时删除旧类，并为新背景图像和新翻转方向创建一个新类。

<style>
div{height:150px; width:150px; border:1px solid black; border-radius:10px;
    background-size:100% 100%;}
.face{background-image:url(http://media.businesslive.ro/wp-content/uploads/creative-monkeyz.png);}
.back{background-image:(http://media-cache-ec0.pinterest.com/avatars/artalacafea-1347781782_600.jpg)}
</style>
<div class="face"><div>

我的初始代码的示例是 here

Answer 1

假设这就是你想要的..

二手toogleClass()在 click() 函数上切换类(“前”和“后”)..

这是fiddle

$(".face").click(function(){
  $(this).toggleClass('back');
});