Question

我正在尝试使用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 );
            }
        } );
    } );

Answer 1

不知何故，这里的主要问题是因为您使用百分比而不是像素来设置宽度。因此，请尝试将90%转换为像素，这样可以解决您的问题。例如，您可以尝试width: '500px'并查看结果。

请注意，您不希望在用户滚动div时总是触发animate函数。因此，您可以添加其他条件，例如&& el.width() == 0。

希望它能回答您的问题。请检查一下：http://jsfiddle.net/13k2aqbf/40/

jQuery Animate（）不会停止动画或完成其任务

1 个答案: