Cycle through hover state based on timer jQuery

Question

There are a few posts on this topic including this one, but none that are specific enough to adapt to my setup.

I need to chain delays together to 'cycle' through the hover states of these four divs: #sectiontrigger1, #sectiontrigger2, #sectiontrigger3, #sectiontrigger4 based on a timer of 3200 ms.

I also need this sequence to loop, for example when the 4th (#sectiontrigger4) div timer ends the cycle resets and the hover state is applied to the first div (#sectiontrigger1) again. This loop needs to repeat indefinitely.

Can this be achieved with jQuery?

@SudharsanS I'm not sure how I would trigger the hover states sequentially so I'm reading through jQuery documentation to try to piece something together - so far I've realised I might have to switch the ID's to classes and use .addClass/.removeClass to apply the hover state and now I'm looking for a way to trigger multiple timers and then reset them all - JS/jQuery is new to me so I'm swimming in uncharted waters — , Jul 20 '17 at 13:55

score 0 · Accepted Answer · answered Jul 20 '17 at 14:22

Here you go with a solution https://jsfiddle.net/0vpht72f/

$('div').mouseenter(function(){
 $(this).css({opacity:0.5});
});

$('div').mouseleave(function(){
 $(this).css({opacity:1});
});

var cnt = 1;
var prevCnt = 4;

setInterval(function(){
 $('#div' + prevCnt).mouseleave();
 $('#div' + cnt).mouseenter();
  prevCnt++;
  cnt++;
  if(cnt > 4){
   cnt = 1;
  }
  
  if( prevCnt > 4){ 
   prevCnt = 1;
  }
}, 3200);

div{
  height: 70px;
  width: 70px;
  background: blue;
  margin: 10px;
  display: inline-block;
  color: #fff;
  font-size: 20px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
Div 1
</div>
<div id="div2">
Div 2
</div>
<div id="div3">
Div 3
</div>
<div id="div4">
Div 4
</div>

I guess this is what you are looking for.

thank you so much, this would have been virtually impossible with my current level of JS knowledge, really appreciate it! — , Jul 20 '17 at 14:25

Cycle through hover state based on timer jQuery

1 Answers1