Div收缩，然后返回到大小，然后翻转jQuery

我有点像jquerynoob。我希望有一个

div

，当点击时（或该

div

中的按钮），它将首先缩小宽度和高度约10px，然后恢复到正常大小，然后翻转。我希望它在每次单击时都能与此动画来回翻转

到目前为止，我有：

jQuery：

$('.card').click(function(){
     $('.card').toggleClass('flipped');
    var div = $('.front , .back');
    div.animate({ width: '-=10px', height: '-=10px' });
    div.animate({ width: '+=10px', height: '+=10px' });

});

CSS:

HTML:

它翻转得很好。我就是不能让他们一起工作

以下是我所拥有的一部分： 你可以在小提琴中看到，高度增加，宽度缩小。不知道为什么

---

谢谢，伙计们

您需要分离这些对象：

$('.card').click(function(){
         $('.card').toggleClass('flipped');
        $('.front').animate({ width: '-=10px', height: '-=10px' });
        $('.back').animate({ width: '+=10px', height: '+=10px' });

    });

---

我认为您需要分别设置正面和背面的动画，您可以根据

翻转的

状态选择要设置动画的一侧，然后翻转作为上一个动画的回调

$（'.card'）。单击（函数（）{
var部门，
动画={
顶部：'+=10px'，
底部：'+=10px'，
左：'+=10px'，
右：'+=10px'
},
anim2={
顶部：'-=10px'，
底部：'-=10px'，
左：'-=10px'，
右：'-=10px'
},
速度=500；
if（$（this）.hasClass（'flipped'））{
div=$（'.back'）；
}否则{
div=$（“.front”）；
}
动画组（动画、速度）；
动画（动画2，速度，功能（）{
$（'.card'）.toggleClass（'flipped'）；
});
});
.container{
宽度：200px；
高度：260px；
位置：相对位置；
边框：1px实心#ccc；
-webkit透视图：800px；
-moz透视图：800px；
-透视图：800px；
透视图：800px；
}
.卡片{
宽度：100%；
身高：100%；
位置：绝对位置；
-webkit转换：-webkit转换1s；
-moz变换：moz变换1s；
-o-转变：-o-转变1s；
转变：转变1s；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
-o变换样式：preserve-3d；
变换样式：保留-3d；
-webkit转换来源：50%50%；
}
.信用卡部{
显示：块；
身高：100%；
宽度：100%；
线高：260px；
颜色：白色；
文本对齐：居中；
字体大小：粗体；
字体大小：140px；
位置：绝对位置；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-o-背面-可见性：隐藏；
背面可见性：隐藏；
}
.名片.正面{
背景：红色；
}
.卡，回来{
背景：蓝色；
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}
.翻了{
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}

这
那个
这很接近，但我需要正面和背面收缩，然后增长，然后翻转。在你的小提琴里，每次我一按，前面就变大，后面就变小。我需要每件事发生一次，每次点击。所以一次点击会导致收缩，然后返回到大小，然后翻转。这是超级接近！！不过有些问题。我注意到在你的代码片段中，字体从右下角收缩，然后背面从左下角收缩。有没有一种从中心开始收缩的方式？我需要它看起来像整个东西变小了。而且，我需要这一切发生得更快。非常感谢@NickTaylor所有这些都不在你的评论中，为了避免我们在评论中重复，请在你的帖子中清楚地写下你的最终目标。一般建议你在每篇文章中都有一个明确的问题，如果你知道你需要其他方面的帮助，那么就写一篇新的文章，而不是在当前的文章中更改/添加你想要的内容。对此我深表歉意！我想我对我的行动很清楚。这是一件很难描述的事情。但是，如果你认为我需要缩小从中心和动画的速度作为一个单独的问题/问题，那么我想我确实需要一个新的职位。非常感谢！事实上，我发现这是完美的！
<section class="container">
<div class="card" >
    <div class="front">THIS</div>
    <div class="back">THAT</div>
</div>
</section>

var div = $('.front , .back');
        div.animate({ width: '-=10px', height: '-=10px' });
        div.animate({ width: '+=10px', height: '+=10px' });

$('.card').click(function(){
         $('.card').toggleClass('flipped');
        $('.front').animate({ width: '-=10px', height: '-=10px' });
        $('.back').animate({ width: '+=10px', height: '+=10px' });

    });