Div, который сжимается, затем возвращается к размеру, затем перелистывает jQuery

Question

Я немного jQuery noob. Я ищу, чтобы иметь div, который при нажатии (или кнопка внутри этого div) сначала уменьшит ширину и высоту около 10 пикселей или около того, а затем вернется к нормальному размеру, а затем перевернется. Я хочу, чтобы каждый раз щелкнул эту анимацию.

меня это до сих пор:

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 и не объявляет d он правильно. Если удалить $('.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/