jQuery addClass example

Change class name on click in jQuery

HTML

<div id="banner" class="pre-click">
  Click me
</div>

<button id="reset">
Reset
</button>

CSS

#banner {
  -webkit-transition: all 2.5s ease-out;
  -moz-transition: all 2.5s ease-out;
  -o-transition: all 2.5s ease-out;
  transition: all 2.5s ease-out;
}

.pre-click {
  height: 120px;
  background: -moz-linear-gradient(top, #25211e 0%, rgba(37, 33, 30, 0) 100%);
  background: -webkit-linear-gradient(top, #25211e 0%, rgba(37, 33, 30, 0) 100%);
  background: linear-gradient(to bottom, #25211e 0%, rgba(37, 33, 30, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#25211e', endColorstr='#0025211e', GradientType=0);
}

.post-click {
  height: 240px;
  background: -moz-linear-gradient(top, #25211e 0%, rgba(37, 33, 30, 255) 100%);
  background: -webkit-linear-gradient(top, #25211e 0%, rgba(37, 33, 30, 255) 100%);
  background: linear-gradient(to bottom, #25211e 0%, rgba(37, 33, 30, 255) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#25211e', endColorstr='#0025211e', GradientType=0);
}

JavaScript

$("#banner").click(function(e) {

  $(this).addClass('post-click');

})

$("#reset").click(function(e) {

  $("#banner").removeClass('post-click');

})