Div 缩小，然后 returns 变大，然后翻转 jQuery

Question

我有点 jQuery 菜鸟。我希望有一个 div，当点击（或 div 中的一个按钮）时，宽度和高度将首先缩小大约 10px 左右，然后 return 到正常大小，然后翻转超过。我希望它随着每次点击动画来回翻转。

到目前为止我有这个：

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/ 在fiddle中可以看到，高度变大了，宽度变小了。不知道为什么。

谢谢大家！

Answer 1

您需要将这些对象分开：

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

    });

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

Answer 2

我想你想分别为正面和背面设置动画，你可以根据 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" >
 <div class="front">THIS</div>
 <div class="back">THAT</div>
</div>
</section>

Div 缩小，然后 returns 变大，然后翻转 jQuery

Div that shrinks, then returns to size, then flips over jQuery

html

css

jquery

jquery-animate