鏈接點擊第一次 - 上滾動動畫不起作用

Question

問題：

當我點擊的第一次，出現的動畫，但在向下滾動時不會發生skill-set鏈接。當用戶向下滾動頁面時，每個圓圈將開始它自己的動畫。如果你點擊兩次skill-set鏈接，但是一切都按照它應有的方式工作。

所以我的問題是，爲什麼動畫on scroll發生在第一次點擊skill-set鏈接？

這是我所說的DEMO，請原諒可怕的佈局。點擊skill-set鏈接後，您會看到動畫發生，但向下滾動時，動畫已完成...但是，如果您單擊兩次鏈接skill-set，然後向下滾動，則會看到每個圓圈都有動畫向下滾動。這是第一次鏈接被點擊時應該發生的情況，但由於某些奇怪的原因，它不是。

JS：

$('#skill-set-link').click(function() { 

    function animateElements(index, element) { // (e, init) 
     if (element) { // (init) 
      $('.progressbar').data('animate', false); 
     } 

     $('.progressbar').each(function() { 
      var elementPos = $(this).offset().top; 
      var topOfWindow = $(window).scrollTop(); 
      var percent = $(this).find('.circle').attr('data-percent'); 
      var percentage = parseInt(percent, 10)/parseInt(100, 10); 
      var animate = $(this).data('animate'); 

      if (elementPos < topOfWindow + $(window).height() + 10 && !animate) { 
       $(this).data('animate', true); 
       $(this).find('.circle').circleProgress({ 
        startAngle: -Math.PI/2, 
        value: percent/100, 
        thickness: 2, // Change this for thickness 
        fill: { 
         color: '#16A085' 
       } 
       }).on('circle-animation-progress', function (event, progress, stepValue) { 
        $(this).find('.percent').text((stepValue * 100).toFixed(0) + "%"); // NOTE: Change '.toFixed(0)' to '.toFixed(1)' to get 1 decimal place to the right... 
       }).stop(); 
      } 
     }); 

    } 
    animateElements({}, true); 
    $('.about_body_wrapper').scroll(animateElements); 
}); 

=================================== ============================================================

任何想法爲什麼動畫on scroll第一次鏈接被點擊時不會發生？

Answer 1

感謝Tony Hinkle的幫助 - 下面是答案。

由於到主分區被隱藏 - 我們需要show()主要DIV事先...然而，增加$('#skill-set').show(0, animateElements);由託尼的建議，並沒有完全工作的權利 - 所以不是$('#skill-set').fadeIn(animateElements)取代，隨着取出0這似乎是伎倆。

非常感謝託尼，但我的方向正確！

下面是用於根據需要使這項工作的最後片段：

function animateElements(index, element) { // (e, init) 

    $('.progressbar').each(function() { 
     var elementPos = $(this).offset().top; 
     var topOfWindow = $(window).scrollTop(); 
     var percent = $(this).find('.circle').attr('data-percent'); 
     var percentage = parseInt(percent, 10)/parseInt(100, 10); 
     var animate = $(this).data('animate'); 

     if (elementPos < topOfWindow + $(window).height() + 10 && !animate) { 
      $(this).data('animate', true); 
      $(this).find('.circle').circleProgress({ 
       startAngle: -Math.PI/2, 
       value: percent/100, 
       thickness: 2, // Change this for thickness 
       fill: { 
        color: '#16A085' 
       } 
      }).on('circle-animation-progress', function (event, progress, stepValue) { 
       $(this).find('.percent').text((stepValue * 100).toFixed(0) + "%"); // NOTE: Change '.toFixed(0)' to '.toFixed(1)' to get 1 decimal place to the right... 
      }).stop(); 
     } 
    }); 

} 

$('#skill-set-link').click(function() { 
    $('.progressbar').data('animate', false); 
    $('#skill-set').fadeIn(animateElements); 
}); 

$(window).scroll(animateElements); 

這裏是最後一次迭代：DEMO

不介意佈局...:)

Answer 2

由於技能集鏈接DIV中的所有內容在第一次運行時仍處於隱藏狀態，因此所有進度條元素的頂部位置均爲零，因此會發生此行爲。由於它們爲零，因此它們符合if語句的標準，並且所有動畫都已啓用。

爲了解決這個問題，我添加了一個對show()進度條元素的調用，包括在show()完成時運行animateElements的參數。

我將調用設置爲「animate」爲菜單項單擊函數爲false，因爲它在animateElements中並不真正起到任何作用。我還從click事件處理程序中刪除了animateElements函數，以簡化代碼的讀取。

function animateElements(index, element) { // (e, init) 

    $('.progressbar').each(function() { 
     var elementPos = $(this).offset().top; 
     var topOfWindow = $(window).scrollTop(); 
     var percent = $(this).find('.circle').attr('data-percent'); 
     var percentage = parseInt(percent, 10)/parseInt(100, 10); 
     var animate = $(this).data('animate'); 

     if (elementPos < topOfWindow + $(window).height() + 10 && !animate) { 
      $(this).data('animate', true); 
      $(this).find('.circle').circleProgress({ 
       startAngle: -Math.PI/2, 
       value: percent/100, 
       thickness: 2, // Change this for thickness 
       fill: { 
        color: '#16A085' 
       } 
      }).on('circle-animation-progress', function (event, progress, stepValue) { 
       $(this).find('.percent').text((stepValue * 100).toFixed(0) + "%"); // NOTE: Change '.toFixed(0)' to '.toFixed(1)' to get 1 decimal place to the right... 
      }).stop(); 
     } 
    }); 

} 

$('#skill-set-link').click(function() { 
    $('.progressbar').data('animate', false); 
    $('#skill-set').fadeIn(animateElements); 
}); 

$(window).scroll(animateElements);