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.removeClass('active');
    $element = ($element.removeClass('active').next().length ? $element.next() : $elements.first()).addClass('active');
  }, 1500);
});