bug Multiply Coins flip jquery

Asked

Viewed 22 times

1

I’m developing a kind of old game, but there is an error that is getting in my way, I need the flip animation to work all the coins however, it only works at first ignoring the others.

code:http://codepen.io/anon/pen/rmrxVo

as you can see in the codepen the code works in the right way, but only in the first currency

jquery html css

1 answer

1


You’re using id when you should be wearing class. You can only have one element per page with a die id. If you change to class it’s gonna work fine.

jQuery(document).ready(function($) {

  var spinArray = ['animation900', 'animation1080', 'animation1260', 'animation1440', 'animation1620', 'animation1800', 'animation1980', 'animation2160'];

  function getSpin() {
    var spin = spinArray[Math.floor(Math.random() * spinArray.length)];
    return spin;
  }

  $('.coin').on('click', function() {
    var $this = $(this);
    $this.removeClass(spinArray.join(' ')); 
    setTimeout(function() {
      $this.addClass(getSpin());
    }, 100);
  });

});
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
}

.coin-flip-cont {
  width: 200px;
  height: 200px;
  float: left;
  margin: 0 5px;
}

.coin {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
}

.coin .front,
.coin .back {
  position: absolute;
  width: 200px;
  height: 200px;
}

.coin .front {
  transform: translateZ(1px);
  border-radius: 50%;
  background-image: url('http://placehold.it/200x200/E8117F/000000');
  background-size: cover;
  display: block;
}

.coin .back {
  transform: translateZ(-1px) rotateY(180deg);
  border-radius: 50%;
  background-image: url('http://placehold.it/200x200/000000/E8117F');
  background-size: cover;
  display: block;
}

.coin.animation900 {
  -webkit-animation: rotate900 3s linear forwards;
  animation: rotate900 3s linear forwards;
}

.coin.animation1080 {
  -webkit-animation: rotate1080 3s linear forwards;
  animation: rotate1080 3s linear forwards;
}

.coin.animation1260 {
  -webkit-animation: rotate1260 3s linear forwards;
  animation: rotate1260 3s linear forwards;
}

.coin.animation1440 {
  -webkit-animation: rotate1440 3s linear forwards;
  animation: rotate1440 3s linear forwards;
}

.coin.animation1620 {
  -webkit-animation: rotate1620 3s linear forwards;
  animation: rotate1620 3s linear forwards;
}

.coin.animation1800 {
  -webkit-animation: rotate1800 3s linear forwards;
  animation: rotate1800 3s linear forwards;
}

.coin.animation1980 {
  -webkit-animation: rotate1980 3s linear forwards;
  animation: rotate1980 3s linear forwards;
}

.coin.animation2160 {
  -webkit-animation: rotate2160 3s linear forwards;
  animation: rotate2160 3s linear forwards;
}

@-webkit-keyframes rotate900 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(900deg);
    -moz-transform: rotateY(900deg);
    transform: rotateY(900deg);
  }
}

@keyframes rotate900 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(900deg);
    -moz-transform: rotateY(900deg);
    transform: rotateY(900deg);
  }
}

@-webkit-keyframes rotate1080 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1080deg);
    -moz-transform: rotateY(1080deg);
    transform: rotateY(1080deg);
  }
}

@keyframes rotate1080 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1080deg);
    -moz-transform: rotateY(1080deg);
    transform: rotateY(1080deg);
  }
}

@-webkit-keyframes rotate1260 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1260deg);
    -moz-transform: rotateY(1260deg);
    transform: rotateY(1260deg);
  }
}

@keyframes rotate1260 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1260deg);
    -moz-transform: rotateY(1260deg);
    transform: rotateY(1260deg);
  }
}

@-webkit-keyframes rotate1440 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1440deg);
    -moz-transform: rotateY(1440deg);
    transform: rotateY(1440deg);
  }
}

@keyframes rotate1440 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1440deg);
    -moz-transform: rotateY(1440deg);
    transform: rotateY(1440deg);
  }
}

@-webkit-keyframes rotate1620 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1620deg);
    -moz-transform: rotateY(1620deg);
    transform: rotateY(1620deg);
  }
}

@keyframes rotate1620 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1620deg);
    -moz-transform: rotateY(1620deg);
    transform: rotateY(1620deg);
  }
}

@-webkit-keyframes rotate1800 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1800deg);
    -moz-transform: rotateY(1800deg);
    transform: rotateY(1800deg);
  }
}

@keyframes rotate1800 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1800deg);
    -moz-transform: rotateY(1800deg);
    transform: rotateY(1800deg);
  }
}

@-webkit-keyframes rotate1980 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1980deg);
    -moz-transform: rotateY(1980deg);
    transform: rotateY(1980deg);
  }
}

@keyframes rotate1980 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1980deg);
    -moz-transform: rotateY(1980deg);
    transform: rotateY(1980deg);
  }
}

@-webkit-keyframes rotate2160 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(2160deg);
    -moz-transform: rotateY(2160deg);
    transform: rotateY(2160deg);
  }
}

@keyframes rotate2160 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(2160deg);
    -moz-transform: rotateY(2160deg);
    transform: rotateY(2160deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="coin-flip-cont">
  <div class="coin">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>

<div class="coin-flip-cont">
  <div class="coin">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>

  • 1

    Thank you very much, I found it strange to have worked because the main idea was to use classes but the same error still happened, I must have confused myself somewhere, again thank you xD

  • @Lucasdesouza great to have worked. If you want you can click to mark the answer as accepted.

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.