jQuery addClass example

Change class name on click in jQuery

by CarambaMoreno

HTML

<div class="escenario derecha">
<div class="cortador">
<div class="circulo">
</div>
</div>
</div><div class="escenario izquierda">
<div class="cortador">
<div class="circulo">
</div>
</div>
</div>
<a>Toggle</a>

CSS

.circulo {
  width: 30px;
  height: 30px;
  border: 4px solid black;
  border-radius: 50%;
}

.cortador {
  width: 19px;
  overflow: hidden;
  transform: translateX(-100%);
  transition: none;
  transform-origin: right center;
}

.escenario {
  width: 19px;
  position: relative;
  overflow: hidden !important;
  display:inline-block;
}

.cortador.active {
  transform: translateX(-100%) rotate(180deg);
  transition: all 0.5s linear;
}

.derecha .cortador {
  transition-delay: 0.5s !important;
  transform: translateX(100%);
  transform-origin: left center;
}

.derecha .cortador .circulo {
  transform: translateX(-50%);
}

.derecha .cortador.active {
  transform: translateX(100%) rotate(180deg);
  }

JavaScript

$('a').on('click',function(){
	$('.cortador').toggleClass('active');
});