bug multiply coins flip jquery

Question

bug multiply coins flip jquery

Navigation

#1 by (1 votes)

1

I'm developing some kind of game of the old one, but there is an error that is disturbing me, I need the flip animation to work all the coins, but it only works at first ignoring the others.

code: link

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

html jquery css

asked by anonymous 16.05.2017 / 10:20

1 answer

Problem using lists of vowels and even numbers Reuse of functions in Python

score 1 · Accepted Answer

You are using id when you should use class . You can only have one element per page with a given id . If you move to class it will 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><divclass="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>