jQuery toggleClass example

Toggle class name on click in jQuery

HTML

.<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rect">
  <div class="rect-container">
    <div></div>
    <div>
      <div class="grid-2-small">
        <a class="circle" data-rect="rect-1"></a>
        <a class="circle" data-rect="rect-2"></a>
        <a class="circle" data-rect="rect-3"></a>
        <a class="circle" data-rect="rect-4"></a>
      </div>
    </div>
  </div>
</div>

CSS

.rect {
  display: flex;
  justify-content: center;
  background: #fbc1d7;
  padding: 50px;
  background-size: cover;
  background-position: center;
}

.rect-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 1100px;
}

.rect-1 {
  background: red;
}

.rect-2 {
  background: blue;
}

.rect-3 {
  background: yellow;
}

.rect-4 {
  background: green;
}

.grid-2-small {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.circle {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: #910700;
  opacity: .4;
  transition: ease .5s;
  cursor: pointer;
}

.circle:hover {
  opacity: .7;
  transform: scale(1.05);
  text-decoration: none;
}

.active-circle {
  opacity: .9;
  transform: scale(1.25);
}

JavaScript

jQuery($ => {
  let $rect = $('.rect')
  let $circles = $('.circle').on('mouseover', setActiveCircle)
  $circles.first().trigger('mouseover')

  function setActiveCircle() {
    $circles.removeClass('active-circle')
    $(this).addClass('active-circle')
    $rect.removeClass('rect-1 rect-2 rect-3 rect-4').addClass($(this).data('rect'))
  }
  function circletimer(){
    let $activeCircle = $circles.filter('.active-circle')
    let $targetCircle = $activeCircle.next()
    if ($targetCircle.length === 0)
      $targetCircle = $circles.first()

    setActiveCircle.call($targetCircle)
  }

 var stopinter=setInterval(circletimer(), 5000)
  
  if(  $circles.first().trigger('mouseover'))  clearInterval(stopinter)


})