基于计时器jQuery循环到悬停状态

Question

此主题有几篇帖子，包括this one，但没有一篇文章足以适应我的设置。

我需要将延迟链接在一起“循环”。通过这四个div的悬停状态：#sectiontrigger1，#sectiontrigger2，#sectiontrigger3，#sectiontrigger4基于 3200 ms 的计时器。

我还需要循环这个序列，例如当第4个（#sectiontrigger4）div计时器结束时，循环重置并且悬停状态再次应用于第一个div（#sectiontrigger1）。这个循环需要无限重复。

这可以通过jQuery实现吗？

Answer 1

您可以使用解决方案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>

我想这就是你要找的东西。