如何在JQuery中添加類到html元素之間的延遲？

Question

我試圖動畫我的投資組合的這一部分：

我想每個那些5條點亮一次一個。

這裏都是這樣做的相關代碼：

HTML：

<div class="row"> 
    <div class="col-lg-12 skill-item"> 
     <div class="row"> 
      <div class="col-lg-2"><i class="devicon-html5-plain-wordmark"></i></div> 
      <div class="col-lg-10"> 
       <div class="row"> 
        <div class="col-lg-12 skill-bar"> 
         <div class="row"> 
          <div class="col-lg-2 skill-rank-inactive"></div> 
          <div class="col-lg-2 skill-rank-inactive"></div> 
          <div class="col-lg-2 skill-rank-inactive"></div> 
          <div class="col-lg-2 skill-rank-inactive"></div>          
          <div class="col-lg-2 skill-rank-inactive"></div>          
         </div> 
        </div> 
        <div class="col-lg-12 skill-level"> 
         HTML5 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

SCSS：

.skill-rank-inactive { 
    background: white; 
    border: 2px solid white; 
    height: 3vh; 
    transition: all 2s; 
} 

#back-end { 
    .skill-rank-active { 
     background: $green; 
     border: 2px solid white; 
     height: 3vh; 
    } 

    i { 
     color: $green; 
    } 
} 

#front-end { 
    .skill-rank-active { 
     background: $blue-bright; 
     border: 2px solid white; 
     height: 3vh; 
     transition: all 2s; 
    } 

    i { 
     color: $blue-bright; 
    } 
} 

的Javascript：

$('#skills-page').bind('inview', function() { 
    $('.skill-rank-inactive').addClass('skill-rank-active'); 
    $('.skill-rank-inactive').removeClass('skill-rank-inactive'); 
}); 

有沒有一種方式來增加500ms之間的延遲網頁上每個「技能級別」的過渡？會有多種技能，例如PHP，CSS等......我希望每個技能都可以在同一時間開始，即。每個技能的第一個等級從500ms開始，一直到下一個等級。

Answer 1

可以使用setTimeout函數來有事耽擱

//延誤500ms的

setTimeout(do_something_here, 500); 

Answer 2

我決定去這個網站上找到了辦法：

https://fabriceleven.com/design/creating-fancy-css3-fade-in-animations-on-page-load/

Answer 3

給所有divs像skills這樣的普通類然後用500毫秒的延遲調用一個.each。

jQuery的功能應該是這個樣子：

$('.skills').each(function(){ 
    setTimeout($(this).removeClass('skill-rank-inactive'),500); 
)} 

調用此函數上document.ready()或事件。

Answer 4

可以使用帶的setTimeout（）

$('#skills-page').bind('inview', function() { 

    var delay = 0; 

    $.each($('.skill-rank-inactive'), function(){ 
     var element = $(this); 
     setTimeout(function(){ 
      element.addClass('skill-rank-active') 
      element.removeClass('skill-rank-inactive'); 
     },delay); 

     delay += 500; 
    }); 

}); 

一個循環我知道的setTimeout是不是jQuery的，但問題一直是：

「有沒有辦法來添加間500ms的延遲網頁上每個 「技能級別」的過渡？

Answer 5

無javascript A液：具有5個元素保持不變。然後有一個單獨的元素，它可以依次覆蓋每個元素，並且在它覆蓋它時會短暫地照亮。

// No javascript needed! :D

@keyframes moving-light { 
 
    0% { margin-left: 1%; } 
 
    80% { margin-left: 81%; } 
 
    100% { margin-left: 81%; } 
 
} 
 
@keyframes blinking-light { 
 
    0% { opacity: 0; } 
 
    65% { opacity: 1; } 
 
    100% { opacity: 0; } 
 
} 
 

 
.lightup { 
 
    position: relative; 
 
    width: 100%; height: 30px; 
 
    font-size: 0; /* Get rid of any inline spaces between elements */ 
 
} 
 
.lightup > .box { 
 
    display: inline-block; 
 
    width: 18%; height: 100%; 
 
    margin-left: 1%; margin-right: 1%; 
 
    background-color: #a00000; 
 
} 
 
.lightup:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: block; 
 
    width: 18%; height: 100%; 
 
    left: 0; top: 0; 
 
    background-color: #ff4040; 
 
    opacity: 1; 
 
    
 
    animation: 
 
    5s steps(4, end) infinite moving-light, 
 
    1s ease-out infinite blinking-light; 
 
}

<div class="lightup"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>