将 class 添加到 interval 后容器中的每个 div，并删除之前的

Question

我正在尝试依次向容器内 div 内的每个 <a> 添加 'hovered' class。在应用每个 class 之间应该有一个短暂的延迟，并且当 class 应用到下一个 div 时，它应该从前一个中删除。在相同的延迟之后，class 应该从最后的 div 中删除。

jQuery(document).ready(function() {

    $('.banner-wrap > div > a').each(function(i){
        var row = $(this);
        setTimeout(function() {
            $('.hovered').removeClass('hovered');
            row.toggleClass('hovered');
        }, 400*i);

    });

});

这是一半的工作 - 但我正在努力了解如何延迟第一项（目前正在加载 class）并且还需要一个关于如何确保它被删除的指针在最后一个 div 具有相同间隔的 class 之后。

Answer 1

给你..

$(document).ready(function() {
    var interval = 1000;
    var timerIds = [];
    var links = $('.banner-wrap > div > a');

    $.each(links, function(index, value) {      
        if (index == links.length - 1) {
            timerIds.push(window.setTimeout(function() {
                $('.hovered').removeClass('hovered');
                $.each(timerIds, function(idx, val) { 
                    clearTimeout(val);
                });
                while (timerIds.length) {timerIds.pop();}
            }, interval*(index + 2)));
        }
      
        timerIds.push(window.setTimeout(function() {
            $('.hovered').removeClass('hovered');
            $(value).toggleClass('hovered');
        }, interval*(index + 1)));
    });      
});

div {display:block;padding:1em;}

a {display:block; line-height:1em; color:gray;background-color:whitesmoke;border:0.1em solid whitesmoke;transition: all 1s;}
a.hovered {display:block;height:3em;line-height:3em;color:white;background-color:gray;border:0.1em solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner-wrap">
  <div>
    <a href="#">Link 1</a>
    <a href="#">Link 1</a>
    <a href="#">Link 1</a>
    <a href="#">Link 1</a>
    <a href="#">Link 1</a>
    </div>
  </div>

考虑到这一点，这里使用各种 $.each 配置进行性能测试。 http://jsperf.com/jqueryeach

将 class 添加到 interval 后容器中的每个 div，并删除之前的

Add class to each div in a container after interval, and remove previous

jquery

timeout

delay