Jestem trochę jquery noob. Chcę mieć div, że po kliknięciu (lub przycisku w tym div) najpierw zmniejsza szerokość i wysokość 10px, a następnie powrócić do normalnego rozmiaru, a następnie odwróć się. Chcę, żeby odwrócił iz powrotem z tą animacją za pomocą każdego kliknięcia.

Mam to do tej pory:

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>

Działa to, aby odwrócić kartę, ale po prostu odejmuje 10px i nie doda go prawidłowo. Jeśli usunąłem $('.card').toggleClass('flipped'); kurczy się i doskonale się rozwija, a jeśli usuną

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

Doskonale się odwraca. Po prostu nie mogę wydawać się współpracować razem!

Oto jsfiddle tego, co mam: https://jsfiddle.net/pistonlegs/qcvsss2OH/1/ . Możesz zobaczyć na skrzypce, wysokość rośnie i szerokość kurczy się. Nie pewny dlaczego.

Dzięki chłopaki!

0
Nick Taylor 16 luty 2017, 19:10

2 odpowiedzi

Najlepsza odpowiedź

Myślę, że chcesz animować z przodu iz tyłu osobno, a można wybrać, która strona do animacji na podstawie stanu flipped, a następnie odwrócić się jako wywołanie zwrotne ostatniej animacji.

$('.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>
0
Michael Coker 16 luty 2017, 17:42

Musisz oddzielić te obiekty:

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

    });

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

0
Banzay 16 luty 2017, 16:13