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

【问题标题】：Toggle/animate css class automatically on specific intervals with jquery使用 jquery 在特定时间间隔自动切换/动画 css 类
【发布时间】：2016-05-03 17:45:41
【问题描述】：

以下 php 代码生成三个列表项。我想在 mouseover/mouseout 上添加/删除 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>

【问题讨论】：

标签： javascript php jquery html css

【解决方案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/

【讨论】：

它似乎在工作。有什么建议可以在特定的时间间隔内自动执行，从左到右，反之亦然？
是的，你可以在这里找到一个实现：jsbin.com/senedakupu（抱歉之前链接错误）
您的代码按预期工作。我认为这是正确的答案。