jqueryで特定の間隔でCSSクラスを自動的に切り替えます/

Question

次のPHPコードは3つのリスト項目を生成します。 mouseover/mouseoutにa css class activeを追加/削除します。以下に示すjsはクラスを正常にトグルしますが、アイテムをマウスオーバーすると同時にすべてアクティブになります。私はホバー上の単一のリスト項目をアニメートしたい。そのループ以来、私はマウスオーバーで個々のリストアイテムをアニメーション化する方法をあまり理解していません。もう1つの要件は、ページが読み込まれるたびに5秒後にマニュアルホバーオーバーに加えて自動的にリスト項目をアニメートすることです。私はあなたが私に提供するどんな洞察も大いに感謝されるので、私はjsと非常に精通していません。

<ul class="daily-featured__videos"> 
    <?php for ($i = 0; $i < 3; $i++) : ?> 
     <li class="the-daily-featured__video daily-featured__video active"> 
      <div class="daily-featured__video-image"> 
       <a href="<?php echo $this->url($this->videos[$i]->getProperties(), 'media_video_view'); ?>" > 
        <img title="<?php echo addslashes($this->videos[$i]->title); ?>" src="<?php echo $this->videos[$i]->getPoster('small'); ?>" style="width: 258px;"> 
        <div class="thumbnail-action-button icon-play the-thumnbail-action-button" data-label="<?php echo $this->videos[$i]->duration; ?>" ></div> 
       </a> 
      </div> 
      <div class="daily-featured__video-text"> 
       <div class="daily-featured__video-channel"><?php echo $this->videos[$i]->credit; ?></div> 
       <h2 class="daily-featured__video-title"> 
        <a href="<?php echo $this->url($this->videos[$i]->getProperties(), 'media_video_view'); ?>"> 
         <?php echo $this->videos[$i]->title; ?> 
        </a> 
       </h2> 
       <?php daily_featured_socials(); ?> 
      </div> 
     </li> 
    <?php endfor; ?> 
</ul> 


<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".the-daily-featured__video").hover(function() { 
      $(".the-daily-featured__video").toggleClass("active"); 
     }); 
    }); 
</script> 

Answer 1

あなたはこのようにそれを行うことができます。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".the-daily-featured__video") 
      .mouseenter(function(){ $(this).addClass("active") }) 
      .mouseleave(function(){ $(this).removeClass("active") }); 
    }); 
</script> 

そしてここjsbinの簡易版：https://jsbin.com/zowidaruke/