时间戳

首页 > 解决方案 > jQuery Animate() 不会停止动画或完成其任务

jquery - 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 );
            }
        } );
    } );

标签： jqueryanimationevents

解决方案

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

animate附带说明一下，一旦用户滚动浏览 div ，您不希望始终触发该功能。因此，您可以添加另一个条件，例如&& el.width() == 0.

希望它能回答你的问题。看看这个：http: //jsfiddle.net/13k2aqbf/40/

推荐阅读