Divが縮小してからサイズに戻り、jQueryで反転します

Question

私は幾分jQueryのnoobです。私はdivをクリックして（またはその中のボタンdiv）最初に幅と高さを約10pxほど縮めてから、通常のサイズに戻してから反転させることを望んでいます。このアニメーションを1回のクリックで前後に移動したいと思っています。

私はこれまでのところ、これを持っている：

の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> 

これは、カードを反転するために動作しますが、それ10ピクセルを減算して広告は表示されませんそれは適切に戻る。私は$('.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/