javascript - jquery scrollTop 弹跳

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

现在，如果您希望它在到达用户 View 时只动画一次，您只需设置一个全局变量值并添加一个条件，如下所示:

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