Question

我做错了什么？我的技巧棒在跳舞。加载后我想修复它们。

在这里检查我的笔：http://codepen.io/anon/pen/KdEeWW

$(window).scroll(function() {
  if ($(this).scrollTop() > 300) {
    $('progress').each(function() {
      var max = $(this).val();
      $(this).val(0).animate({
        value: max
      }, {
        duration: 2000,
        easing: 'easeOutCirc'
      });
    });
  };
});

Answer 1

您skillbars正在跳舞，因为您已在event上写了scroll。因此，如果您在完成animation之前滚动两次，那么它将再次开始，您也不会检查您的animation是否已被执行。

动画之前只需.stop animation，如下所示：

$(this).stop().val(0).animate({
     value: max
}, {
    duration: 2000,
    easing: 'easeOutCirc'
});

<强> Fiddle DEMO

<强>更新

您现在正在采取行动的方式存在错误。每次滚动时都会覆盖原始值，从而为每次显示较少的进度提供空间。所以你需要做的是，将原始值存储在每个元素的某个data-*属性中，并且每次从原始值设置值，这样你每次也可以使value=0。以下更改将为您提供上述效果。

<强> HTML

<progress value="80" data-originalvalue="80" max="100"></progress>
                   //^^^^To store original value
<span>JavaScript/jQuery</span>
<progress value="70" data-originalvalue="70" max="100"></progress>
<span>HTML5/CSS3</span>
<progress value="60" data-originalvalue="60" max="100"></progress>
<span>NodeJS</span>
<progress value="70" data-originalvalue="70" max="100"></progress>
<span>Java/PHP</span>
<progress value="60" data-originalvalue="60" max="100"></progress>
<span>MySQL</span>
<progress value="80" data-originalvalue="80" max="100"></progress>
<span>Photoshop</span>

你 JS 现在是

$(window).scroll(function() {
  if ($(this).scrollTop() > 300) {
    $('progress').each(function() {
      var max = $(this).data('originalvalue'); //get from data-originalvalue attribute
      $(this).val('0').stop().animate({
        value: max
        }, {
        duration: 2000,
        easing: 'easeOutCirc'
      });
    });
  };
});

<强> Updated DEMO

现在，如果您希望它在点击用户视图时仅动画一次，您只需设置一个全局变量值并再添加一个条件，如下所示：

var isAnimated=false; //global variable

$(window).scroll(function() {
  if ($(this).scrollTop() > 300 && !isAnimated) {//Also check if animated
    $('progress').each(function() {
      var max = $(this).data('originalvalue');
      $(this).val('0');  
      $(this).stop().animate({
        value: max
        }, {
        duration: 2000,
        easing: 'easeOutCirc'
      });
    });
    isAnimated=true;//once done set it to true so that animation will not repeat.
  };
});

<强> One time animation demo

Answer 2

这是因为你每次都设置你的值0。你可以试试这个。它易于实现，您无需维护所有这些。

http://mynameismatthieu.com/WOW/

jquery scrollTop是弹跳的

2 个答案: