@keyframes effect stoppen Javascript css

Donamd · 30 jul 2022

Met onderstaande code worden er 5 div's aangemaakt die allemaal de functie clickable mee krijgen.
Zodra op één van de div's geklikt wordt zal deze beginnen te knipperen.

Indien er een volgende keer op een andere div geklikt wordt zal deze ook beginnen te knipperen, maar blijft de eerst geklikte div ook nog verdere knipperen..
Hoe kan ik er nu voor zorgen dat de andere div stopt met knipperen.

Code:

<style>

.item {
  background: #cccccc;
  width: 50px;
  cursor: pointer;
}

@keyframes blinker {  
  50% { opacity: 0; }

</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="crossorigin="anonymous"></script>

<div id="area"></div>

<script>

  for (var i = 1; i < 6; i++) {
     
     $("#area").append("<div id='box" + i + "' class='item'>" + i + "</div>");
     
     $('#box' + i ).click(function() {
        $(this).css({"animation": "blinker 1.2s linear infinite"});                                  
     });
     
  }
  
</script>

bron · 30 jul 2022

Zelf zou ik met een css-class (hier 'knipper') werken.

Code:

<style>
.item {
  background: #cccccc;
  width: 50px;
  cursor: pointer;
}
@keyframes blinker {
  50% { opacity: 0; }
}
.knipper {
  animation: blinker 1.2s linear infinite;
}
</style>

<div id="area"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="crossorigin="anonymous"></script>

<script>
for (var i = 1; i < 6; i++) {
  $("#area").append("<div id='box" + i + "' class='item'>" + i + "</div>");
}
$('.item').click(function() {
  $('.item').each(function() {
    $(this).removeClass('knipper');
  });
  $(this).addClass('knipper');
});
</script>

Dan blijven css en jQuery netjes gescheiden.

edit: De jQuery kan natuurlijk kort

Code:

for (var i = 1; i < 6; i++) {
  $("#area").append("<div id='box" + i + "' class='item'>" + i + "</div>");
}
$('.item').click(function() {
  $('.item').removeClass('knipper');
  $(this).addClass('knipper');
});

aanvulling: iets extra code en je kan de knipper ook uitzetten door er nogmaals op te klikken

Code:

for (var i = 1; i < 6; i++) {
  $("#area").append("<div id='box" + i + "' class='item'>" + i + "</div>");
}
$('.item').click(function() {
  if ( $(this).hasClass('knipper') ) {
    $(this).removeClass('knipper');
  } else {
    $('.item').removeClass('knipper');
    $(this).addClass('knipper');
  }
});

@keyframes effect stoppen Javascript css

Donamd

Gebruiker

bron

Moderator

Nieuwste berichten

Wij waarderen jouw privacy