在jQuery的特定時間間隔上自動切換/動畫css類

Question

以下php代碼生成三個列表項。我想在mouseover/mouseout上添加/刪除a css class active。下面顯示的js會成功切換活動類，但是當我將鼠標懸停在某個項目上時，它們會一次全部切換。我想在懸停時爲單個列表項添加動畫。由於它是一個循環，我不太瞭解如何爲mouseover上的單個列表項添加動畫。另一個要求是，除了在頁面加載後每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/