jQuery addClass example

Change class name on click in jQuery

by Kai Carver

HTML

<div class="word first-form">
  <div class="letter letter-b">B</div>
  <div class="letter letter-c">C</div>
  <div class="letter letter-h">H</div>
  <div class="letter letter-a">A</div>
  <div class="letter letter-n">N</div>
  <div class="letter letter-g">G</div>
  <div class="letter letter-e">E</div>
</div>

<button id="action_btn">
  Animate
</button>

CSS

.word {
  font-size: 0;
  margin-left: -58px;
  text-align: center;
}

.letter {
  display: inline-block;
  text-align: center;
  transition: 0.3s all ease-in-out;
  font-size: 5rem;
  width: 58px;
}

.word .letter.letter-b {
  opacity: 0;
}

.word.first-form .letter.letter-b {
  transform: translateX(100%);
  opacity: 1;
}

.word.first-form .letter.letter-c {
  transform: translateX(300%);
}

.word.first-form .letter.letter-h {
  transform: translateX(300%);
}

.word.first-form .letter.letter-n {
  opacity: 0;
}

.word.first-form .letter.letter-g {
  opacity: 0;
}

.word.first-form .letter.letter-e {
  transform: translateX(-400%);
}

JavaScript

$('#action_btn').on('click', function(){
	$('.word').toggleClass('first-form');
})