Question

我有点像jQuery noob。我希望有一个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：

 .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

您需要分隔这些对象：

utf8mb4bin

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

Answer 2

我认为你想要分别为正面和背面设置动画，你可以根据flipped状态选择要制作动画的一面，然后翻转为最后一个动画的回调。

＆＃13;

$('.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');
  });
});

＆＃13;

.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 );
}

＆＃13;

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

＆＃13;

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

2 个答案: