jQuery addClass example

Change class name on click in jQuery

by luka kupunia

HTML

<div class="switch">
  <div class="stick"></div>
</div>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
div.switch {
  width: 300px;
  height: 100px;
  background: grey;
  margin: 50px auto;
  border-radius: 50px;
  position: relative;
}
div.switch .stick {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  background: white;
  position: absolute;
  top: 10px;
  left: 10px;
  transition: 1s;
  /* transform: scaleX(1.4); */
  transform-origin: left;
}
div.switch .stick.active {
  animation: luka 1s linear forwards;
}
@keyframes luka {
  50% { transform: rotateX(70deg) translateX(80px); background: black; width: 200px; animation-timing-function: cubic-bezier(0.87, 0.02, 0.98, 0.97); }
  80% { transform: rotateX(0deg) translateX(160px); background: purple;}
  100% { width: 80px; transform: rotateX(0deg) translateX(200px); }
}

JavaScript

$('.switch').on('click',function(){
$('.stick').toggleClass('active');
})