在间隔之后将类添加到容器中的每个div，并删除上一个

Question

我正试图依次向容器内div内的每个<a>添加一个"悬停"类。应用的每个类之间应该有一个短暂的延迟，并且当该类应用到下一个div时，它应该从上一个div中删除。在相同的延迟之后，该类应该从最后的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);
    });
});

这已经起到了一半的作用，但我很难理解如何延迟第一个项（目前正在加载该类），还需要一个指针来指示如何确保在最后一个div拥有相同间隔的类后将其删除。

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

---