之后停止滚动显示元素答案

【问题标题】：Stop scrolling display element after之后停止滚动显示元素
【发布时间】：2015-04-21 11:12:57
【问题描述】：

我想用滚动运行 progressbar 动画。但它运行了几次而不是一次如有不妥请见谅。

请帮帮我。

我的代码是：

<div class="demo-5" data-percent="80">
<script>
$(document).ready(function(){
    $(document).scroll(function(){
        $('.demo-5').percentcircle({
            animate : true,
            diameter : 100,
            guage: 3,
            coverBg:'#fff',
            bgColor: '#efefef',
            fillColor: '#8BC163',
            percentSize: '48px',
            percentWeight: '50px'
         });
    });
});
</script>
  progressbar
</div>

【问题讨论】：

percentcircle 似乎是一个自定义插件。每次触发scroll 事件时，您的代码都尝试在.demo-5 上初始化插件。这不是你想做的。当用户滚动页面时，您需要一种更新percentcircle 的方法。在不了解此插件的情况下，我无法为您提供帮助。

标签： javascript jquery scroll progress-bar

【解决方案1】：

每次用户滚动到元素中的不同位置时都会触发一个滚动事件。实际上，平滑滚动动作会触发一次，但如果滚动“生涩”或进行了几次小滚动，则会触发多次。

【讨论】：

【解决方案2】：

检查这个，我还没有测试，但我希望它有效，

  $(document).ready(function(){
                        $(document).scroll(function(){
                        $('.demo-5').fadeIn(200);
                            $('.demo-5').percentcircle({
                            animate : true,
                            diameter : 100,
                            guage: 3,
                            coverBg:'#fff',
                            bgColor: '#efefef',
                            fillColor: '#8BC163',
                            percentSize: '48px',
                            percentWeight: '50px'
                             });
                            setTimeout(function()
                            { 
                            $('.demo-5').fadeOut(1000);
                             }, 500);
                        });
                    });

【讨论】：