jQuery addClass example

Change class name on click in jQuery

by DefuZe

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div class='main-col'>
<div class='login-form-wrapper'>
 <h3>Вход в личный кабинет</h3>
<form id='login-form'>
  <div class='tab'>tab1
   <div class='tab-inner'>
   <input type='number' placeholder="xxxxx">
    <input type='number' placeholder="xxxxx">
    <input type='number' placeholder="xxxxx">
    
   </div>
   <button type="button" class="nextBtn">Далее</button>
  <div id='signup'><a href='#'>Регистрация</a></div>
  </div>
  <div class='tab'>tab2
  <div class='tab-inner'>
  <input type='number' placeholder="xxxxx">
    <input type='number' placeholder="xxxxx">
    <input type='number' placeholder="xxxxx">
  </div>
  </div>
  <div class='tab'>tab2
  </div>
  
</form>
</div>
</div>

CSS

.main-col {
  max-width: 440px;
    margin: auto;
}
.login-form-wrapper h3 {
   line-height: 40px;
    font-weight: bold;
    color: #777;
    text-align: center;
    text-shadow: 0 1px white;
    background: #f3f3f3;
    border-bottom: 1px solid #cfcfcf;
    border-radius: 3px 3px 0 0;
    background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
    background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
    background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
    background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
    -webkit-box-shadow: 0 1px whitesmoke;
    box-shadow: 0 1px whitesmoke;
}
#login-form {
  background: green;
  position: relative;
}
.tab-inner {
  background: white;
	margin: 100px auto;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  padding: 30px
}

#signup {
  background-color: #aaa;
  width: 100%;
  text-align: center;
}

.tab {
  border: 1px solid red;
  position: absolute;
}

.tab:not(:first-of-type) {
  display: none;
}

JavaScript

$(document).ready(function(){			

$('.nextBtn').click(function() {
  var tab = $(this).closest('.tab');
  
  tab.addClass('animated pulse').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
  		  tab.addClass('animated bounceOutLeft').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
  		$(this).hide(1);
	  	$(this).removeClass('animated pulse bounceOutLeft');
      
      //tab.hide('fast');
        //$(this).unbind('animationend');
  }); 
  }); 
  

  tab.next().show(1).addClass('animated bounceInRight').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
	  	$(this).removeClass('animated bounceInRight');
        //$(this).unbind('animationend');
  }); 
});

	
});