jQuery addClass example

Change class name on click in jQuery

by Nick Sdk

HTML

<div id="container">
  <h3 class="text active">We will <span class="green">8</span> your purchase.</h3>
  <h3 class="text">We will <span class="green">5</span> your purchase.</h3>
  <h3 class="text">We will <span class="green">2</span> your purchase.</h3>
  <h3 class="text">We will <span class="green">3</span> your purchase.</h3>
</div>

CSS

.text {
  transition: opacity .45s ease-in;
  opacity: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
  top: 2px;
  height: 0;
}
.green {
  color: green;
}
.active {
  opacity: 1;
  height: 100%;
}

JavaScript

$(document).ready(function(){
	let $elements = $('h3.text');
  let $element = $elements.first();
  let interval = setInterval(function(){
    $element = ($element.removeClass('active').next().length ? $element.next() : $elements.first()).addClass('active');
  }, 2000);
});