Link щелкнул в первый раз - на прокрутки анимации не работает

Question

Выпуск:

Когда я нажимаю skill-set ссылки в первый раз, анимация происходит, но не происходит, когда вы прокрутите вниз. Каждый круг должен начать свою собственную анимацию, когда пользователь прокручивает страницу вниз. Если вы дважды нажмете ссылку skill-set, все будет работать так, как предполагается.

Так что мой вопрос под рукой, почему не происходит анимация on scroll при первом нажатии на ссылку skill-set?

Это DEMO, о чем я говорю, пожалуйста, извините за ужасную макет. Как только вы нажмете на ссылку 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

Благодаря помощи Тони Хинкла - вот ответ.

Благодаря основной DIV прячась - нам нужно show() основной ДИВ заранее ... Однако, добавление $('#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 с установочным набором навыков все еще скрыто, когда оно выполняется в первый раз, поэтому верхнее положение всех элементов progressbar равно нулю. Поскольку они равны нулю, они удовлетворяют критериям оператора if, и анимация включена для всех из них.

Чтобы исправить это, я добавил вызов show() элементов progressbar, включая параметр для запуска aimateElements, когда show() завершен.

Я переместил вызов, чтобы установить «анимировать» значение false, чтобы функция пункта меню нажала, так как она действительно не служила никакой цели в animateElements. Я также удалил функцию 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);