Question

我试图添加一个“徘徊”的＆＃39;依次对容器内div中的每个<a>进行分类。应用的每个类之间应该有一个短暂的延迟，并且当该类应用于下一个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

你去..

＆＃13;

$(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)));
    });      
});

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

这是在此考虑中使用各种$ .each配置的性能测试。 http://jsperf.com/jqueryeach

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

1 个答案: