jQuery Animate（）不'；不要停止设置动画或完成其任务

我试图用jquery制作一个平滑的进度条，并且只在屏幕上查看时加载每个技能条，最终一切正常，但问题是

animate（）

方法没有完成动画制作，它通过添加

overflow:hidden到元素。
这是我的密码，我不知道我是否做错了什么

    var progressBars = $('.progress_bar .progress_animate');

    // Loop Through Every Element .
    progressBars.each( function() {
        var el        = $(this),
            origWidth = el.data('width'),
            skillPerc = el.parents('.bm_skill').find('.skill_perc');

        // Set The Element Width To 0 .
        el.width(0);
        // Set The Element Percentage Width To 0 & Make it Transparent .
        skillPerc.width(0).css( 'opacity', '0' );

        // Make Changes On The Scroll Event .
        $(window).on( 'scroll', function() {
            var topOffset = $(window).scrollTop(),
                bottomOffset = topOffset + $(window).height();

            // Check if The Element is Being Viewed In The Screen .
            if ( bottomOffset > el.offset().top ) {
                el.animate({
                    width: origWidth
                }, 1500 );

                skillPerc.animate({
                    width: origWidth,
                    opacity: '1'
                }, 1500 );
            }
        } );
    } );

不知何故，这里的主要问题是因为您使用百分比而不是像素来设置宽度。。因此，尝试将
90%
转换为像素，这样可以解决您的问题。例如，您可以尝试宽度：“500px”

并查看结果

作为补充说明，您不希望在用户滚动divs时总是触发

动画

功能。。因此，您可以添加另一个条件，如

&&el.width（）==0

---

希望它能回答你的问题。。检查此项：

一旦用户滚动一个元素，您需要使用它，那么它将始终满足该条件。。这是通缉犯的行为吗？我认为您应该创建一个JSFIDLE，这样我们才能更好地帮助您。@Bla。。。任务必须完成一次，当查看元素时，它将被加载到其特定的宽度。我将创建一个JSFIDLE。@Bla。。。这是JSFIDLE文件，现在您可以看到发生了什么，要看清楚，请打开inspector查看动画在完成任务后的反应，并感谢您的帮助。感谢您的帮助，请允许我在不应用溢出的情况下让动画工作：隐藏；嗯，我不确定。但是，您可以在此处查看有关溢出的注释：实际上，一旦动画完成，溢出将消失。。