Toggle/animieren CSS-Klasse automatisch in bestimmten Abständen mit jquery

Question

Der folgende PHP-Code generiert drei Listenelemente. Ich möchte a css class active bei mouseover/mouseout hinzufügen/entfernen. Die unten gezeigte js schaltet die Klasse aktiv, aber gleichzeitig mit einem Mouseover auf ein Objekt. Ich möchte ein einzelnes Listenelement beim Hover animieren. Da es eine Schleife ist, verstehe ich nicht, wie man einzelne Listenelemente beim Mouseover animiert. Eine weitere Anforderung ist, dass ich die Listenelemente zusätzlich zum manuellen Schweben nach jeweils 5 Sekunden beim Laden der Seite automatisch animieren möchte. Ich bin nicht sehr vertraut mit js, also werden irgendwelche Einblicke, die Sie mir anbieten, sehr geschätzt.

<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

Sie können es auf diese Weise tun:

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

Und hier eine vereinfachte Version auf jsbin: https://jsbin.com/zowidaruke/