javascript - jQuery 循环一个 "add class"方法，延迟介于

Question

我现在正在创建一个网站，其中包括几个部分，其中元素以“级联”样式出现(一个接一个，中间有延迟)。这是我的做法:

setTimeout(function(){
         $('nav .icon-hola').toggleClass('colorHigh');      },300);     
      setTimeout(function(){
         $('nav .icon-progra').toggleClass('colorHigh');      },400);          
      setTimeout(function(){
         $('nav .icon-sistemas').toggleClass('colorHigh');      },500);       
      setTimeout(function(){
         $('nav .icon-equipo').toggleClass('colorHigh');       },600);   
            setTimeout(function(){
         $('nav .icon-clases').toggleClass('colorHigh');      },700); 
      setTimeout(function(){
         $('nav .icon-social').toggleClass('colorHigh');      },800);       
      setTimeout(function(){
         $('nav .icon-contacto').toggleClass('colorHigh');       },900);   

有没有办法创建某种循环，在这种情况下，给每个 $('nav [class^=icon-]') 一个 .addClass('colorHigh ') 每 100 毫秒执行一次方法？

如果有的话，是按我的方式做还是按对方的方式更靠谱？两者都需要相同的资源，还是其中之一需要更多的负载才能应用？

Answer 1

这将完成工作:

编辑代码

var delay=100;
$('nav [class^=icon-]').each(function(counter){
    //counter will start from 0..
    timeout = delay * (counter + 1);
    var selector = $(this);
    setTimeout(function(){
         selector.toggleClass('colorHigh');
    }, timeout);
});

DEMO