jQuery addClass example

Change class name on click in jQuery

by Avinashullal

HTML

<div class="container">
  <div data-card="4" class="card_" style="background: red;"></div>
  <div data-card="3" class="card_" style="background: green;"></div>
  <div data-card="2" class="card_" style="background: blue;"></div>
  <div data-card="1" class="card_" style="background: yellow;"></div>
  <div data-card="0" class="card_" style="background: pink;"></div>
</div>

CSS

body {
  margin: 40px;
}

.container {
  padding: 50px;
  margin: 50px;
  position: relative;
}

.card_ {
  position: absolute;
  top: 0;
  left: 0;
  background: #FFFFFF;
  width: 350px;
  height: 440px;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: 0.4s cubic-bezier(0.28, 0.55, 0.385, 1.65);
  transition: 0.4s cubic-bezier(0.28, 0.55, 0.385, 1.65);
  cursor: pointer;
}

.card_:nth-child(1) {
  z-index: 10;
  top: 0px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.card_:nth-child(2) {
  z-index: 9;
  top: -15px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  opacity: 0.9;
}

.card_:nth-child(3) {
  z-index: 8;
  top: -30px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0.8;
}

.card_:nth-child(4) {
  z-index: 7;
  top: -45px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  opacity: 0.7;
}

.card_:nth-child(5) {
  z-index: 6;
  top: -60px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
  opacity: 0.6;
}

.card_:nth-child(6) {
  z-index: 5;
  top: -75px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  opacity: 0.5;
}

.card_:nth-child(7) {
  z-index: 4;
  top: -90px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.4);
  transform: scale(0.4);
  opacity: 0.4;
}

.card_:nth-child(8) {
  z-index: 3;
  top: -105px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.3);
  transform: scale(0.3);
  opacity: 0.3;
}

.card_:nth-child(9) {
  z-index: 2;
  top:...

JavaScript

var rotate, timeline;

  rotate = function() {
    return $('.card_:first-child').fadeOut(400, 'swing', function() {
      return $('.card_:first-child').appendTo('.container').hide();
    }).fadeIn(400, 'swing');
  };

  timeline = setInterval(rotate, 3000);

  $('body').hover(function() {
    return clearInterval(timeline);
  });

  $('.card_').click(function() {
    return rotate();
  });