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

Question

我有点jQuery noob。我期待有一个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：

.container { 
    width: 200px; 
    height: 260px; 
    position: relative; 
    border: 1px solid #ccc; 
    -webkit-perspective: 800px; 
    -moz-perspective: 800px; 
    -o-perspective: 800px; 
    perspective: 800px; 
    } 
    .card { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transition: -webkit-transform 1s; 
    -moz-transition: -moz-transform 1s; 
    -o-transition: -o-transform 1s; 
    transition: transform 1s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transform-origin: 50% 50%; 
} 
.card div { 
    display: block; 
    height: 100%; 
    width: 100%; 
    line-height: 260px; 
    color: white; 
    text-align: center; 
    font-weight: bold; 
    font-size: 140px; 
    position: absolute; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 
.card .front { 
    background: red; 
} 
.card .back { 
    background: blue; 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 
.card.flipped { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 

HTML：

<section class="container"> 
<div class="card" > 
    <div class="front">THIS</div> 
    <div class="back">THAT</div> 
</div> 
</section> 

这工作翻转卡片，但它只是减去10px而不是广告请妥善保管。如果我删除$('.card').toggleClass('flipped');它会收缩和完美的成长，如果我删除

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

它翻转完美。我似乎无法让他们一起工作！

这是我拥有的JSFiddle：https://jsfiddle.net/PistonLegs/qcvss2oj/1/ 您可以在小提琴中看到高度增长和宽度缩小。不知道为什么。

谢谢，伙计们！

Answer 1

我觉得要单独动画的正面和背面，你可以选择动画基于断flipped状态的哪一侧，然后翻转为最后一个动画的回调。

$('.card').click(function() { 
 
    var div, 
 
    anim = { 
 
     top: '+=10px', 
 
     bottom: '+=10px', 
 
     left: '+=10px', 
 
     right: '+=10px' 
 
    }, 
 
    anim2 = { 
 
     top: '-=10px', 
 
     bottom: '-=10px', 
 
     left: '-=10px', 
 
     right: '-=10px' 
 
    }, 
 
    speed = 500; 
 
    if ($(this).hasClass('flipped')) { 
 
    div = $('.back'); 
 
    } else { 
 
    div = $('.front'); 
 
    } 
 
    div.animate(anim,speed); 
 
    div.animate(anim2,speed,function() { 
 
    $('.card').toggleClass('flipped'); 
 
    }); 
 
});

.container { 
 
    width: 200px; 
 
    height: 260px; 
 
    position: relative; 
 
    border: 1px solid #ccc; 
 
    -webkit-perspective: 800px; 
 
    -moz-perspective: 800px; 
 
    -o-perspective: 800px; 
 
    perspective: 800px; 
 
} 
 
.card { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    -webkit-transition: -webkit-transform 1s; 
 
    -moz-transition: -moz-transform 1s; 
 
    -o-transition: -o-transform 1s; 
 
    transition: transform 1s; 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    -o-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-transform-origin: 50% 50%; 
 
} 
 
.card div { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    line-height: 260px; 
 
    color: white; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    font-size: 140px; 
 
    position: absolute; 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 
.card .front { 
 
    background: red; 
 
} 
 
.card .back { 
 
    background: blue; 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
} 
 
.card.flipped { 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="container"> 
 
<div class="card" > 
 
\t <div class="front">THIS</div> 
 
\t <div class="back">THAT</div> 
 
</div> 
 
</section>

Answer 2

你需要这些对象分开：

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

    }); 

https://jsfiddle.net/banzay52/pz3v213a/