CODEWITHSUNDEEP
javascriptjqueryhtmlcss
billyjov
billyjov

Reputation: 2970

Jquery check event and css animation

I made a css animation and triggered checkbox event using jquery. But it's somethimes not working. I don't understand what i'm doing wrong. Has someone idea on what i'm doing wrong?

expected - always animated text if input is checked or unchecked (any check event)

got - works sometimes and sometimes not working e.g on many clicks

codepen https://codepen.io/billyjov/pen/GxzOLZ

code

$(function() {

    $(".animated").addClass("grow-one");
    
    var $checkbox = $(".checkbox");
    var $animatedText = $("#animatedText")
  $checkbox.change(function () {
		if ($animatedText.hasClass("grow-one")) {
			$animatedText.removeClass("grow-one");
		} else {
			$animatedText.removeClass("grow-two");
		}
		if (this.checked && !$animatedText.hasClass("grow-two")) {
			$animatedText.addClass("grow-two");
		} else {
		
			if ($animatedText.hasClass("grow-two")) {
				$animatedText.removeClass("grow-two");
			}
			$animatedText.addClass("grow-one");
		}
	});

})
.grow-in.grow-one {
    -webkit-animation-name: grow-one;
    animation-name: grow-one;
}

.grow-in.grow-two {
  -webkit-animation-name: grow-two;
    animation-name: grow-two;
}


.grow-in {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 0;
}

.slower {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

h1 {
    font-family: 'Lato', sans-serif;
    font-size: 32px;
    line-height: 62px;
    font-weight: 300;
    color: #000;
    text-align: center;
}

.checkboxes {
  text-align: center;
}


@keyframes grow-one {
    0% {
    transform: scale(0.2);
    opacity: 0;
    }
  
  50% {
    transform: scale(1.2);
  }
  
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes grow-two {
   100% {
    transform: scale(0.2);
    opacity: 0;
    }
  
  50% {
    transform: scale(1.2);
  }
  
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
<h1 class="animated grow-in slower" id="animatedText">CSS3 Animate It</h1>


<div class="checkboxes">
  <div class="checkbox-item">
    <span>item1</span>
    <input type="checkbox" class="checkbox">
  </div>
  <div class="checkbox-item">
    <span>item2</span>
    <input type="checkbox" class="checkbox">
  </div>
  <div class="checkbox-item">
    <span>item3</span>
    <input type="checkbox" class="checkbox">
  </div>
  <div class="checkbox-item">
    <span>item4</span>
    <input type="checkbox" class="checkbox">
  </div>
  <div class="checkbox-item">
    <span>item5</span>
    <input type="checkbox" class="checkbox">
  </div>
  <div class="checkbox-item">
    <span>item6</span>
    <input type="checkbox" class="checkbox">
  </div>
</div>

Upvotes: 2

Views: 410

Answers (1)

pigeontoe
pigeontoe

Reputation: 486

It works as you describe if you replace your $checkbox.change() function to this:

$checkbox.change(function () {
    $animatedText.toggleClass("grow-two");
  });

https://codepen.io/anon/pen/KojjyL?editors=1010

Upvotes: 1

Related Questions