タイマjQueryに基づいてサイクルホバー状態

Question

this oneを含むこのトピックに関する記事はいくつかありますが、設定に適応するのに特有のものはありません。

私は、これらの4つのdivのホバー状態による「循環」に一緒にチェイン遅延する必要があります。3200ミリ秒のタイマーに基づいて#sectiontrigger1、#sectiontrigger2、#sectiontrigger3、#sectiontrigger4。

また、このループがループするのは、たとえば、4番目の（#sectiontrigger4）divタイマーがサイクルをリセットし、最初のdiv（#sectiontrigger1）にホバー状態が再び適用されたときです。このループは無期限に繰り返す必要があります。

これはjQueryで実現できますか？

Answer 1

ここでは、私は、これはあなたが探しているものだと思いソリューションhttps://jsfiddle.net/0vpht72f/

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

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

 
var cnt = 1; 
 
var prevCnt = 4; 
 

 
setInterval(function(){ 
 
\t $('#div' + prevCnt).mouseleave(); 
 
\t $('#div' + cnt).mouseenter(); 
 
    prevCnt++; 
 
    cnt++; 
 
    if(cnt > 4){ 
 
    \t cnt = 1; 
 
    } 
 
    
 
    if(prevCnt > 4){ 
 
    \t 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>

で行きます。