divの上にスクロールすると（表示されている場合）、このdivのjQueryスクリプトを開始します

Question

divの上にスクロールするよりアニメーションの問題を解決する必要があります。私は、この機能のうち、このコードを設定した場合、私はページがこれをスクロールするときに、このプログレスバーをアニメーション化しようとすると、私は

$('#bar'+dataNr).find('span').removeClass().addClass(dataColor).animate({width: dataWidth}); 

すべてが同様に働いているコードのこの部分、movemoseなどのMouseEnterなどのすべてのイベントを意味します動作していません。ここに私のコードは、間違ったでhttps://jsfiddle.net/y2th0cwk/

$(window).scroll(function(){ 
 
    var dataColor = $(this).data('color'); 
 
    var dataWidth = $(this).data('width'); 
 
    var dataNr = $(this).data('nr'); 
 

 
    if($(this).scrollTop()>0){ 
 
    $('#bar'+dataNr).find('span').removeClass().fadeIn(1000).addClass(dataColor).animate({width: dataWidth}); 
 
\t }else{ 
 
    $('#bar'+dataNr).find('span').removeClass(dataColor); 
 
    \t } 
 
});

.progress-bar { 
 
    background-color: rgba(0,0,0,0.7); 
 
    height: 25px; 
 
    padding: 5px; 
 
    width: 300px; 
 

 
    border-radius: 5px; 
 
    } 
 

 
.progress-bar span { 
 
    display: inline-block; 
 
    height: 100%; 
 
    width: 0; 
 
    border-radius: 3px; 
 
} 
 

 
.blue { 
 
    background-color: #34c2e3; 
 
}

<div class="container skillsBar"> 
 
     <h2>Skills</h2> 
 
     <div class="skills1"> 
 
     <p class="changeBar" data-width="30%" data-color="blue" data-nr="1">PHP/WordPress</p> 
 
      <div id="bar1" class="progress-bar"> 
 
      <span></span> 
 
      </div> 
 
     </div> 
 
</div>

Answer 1

なぜ件のデータですか？このdivをスクロールするときに、プログレスバーを設定するためにHTMLからデータを取得する必要があります。私が入れたとき$('#bar'+dataNr).find('span').removeClass().fadeIn(1000).addClass(dataColor).animate({width: dataWidth});進行状況バーが動作しています。私の場合は、プログレスバーをdivにスクロールするときにアクティブなプログレスバーにしたい。

https://jsfiddle.net/k5gc96ex/