javascript - 使用 jquery 在特定时间间隔自动切换/动画 css 类

Question

以下 php 代码生成三个列表项。我想在鼠标悬停/鼠标移出时添加/删除 a css class active。下面显示的 js 成功地切换了类的事件状态，但是当我将鼠标悬停在某个元素上时，所有这些都会立即发生。我想在悬停时对单个列表项进行动画处理。由于它是一个循环，我不太明白如何在鼠标悬停时为单个列表项设置动画。另一个要求是，除了在页面加载时每次 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/