如何使我的动画技能栏响应

Question

我的网站上有一个动画技能栏，该栏滚动到视图时会触发。 到目前为止，一切正常。 除非视口更改/窗口调整大小，否则动画条不会适应它，并且会太长或太短。

我试图用$(window).resize(function(){location.reload();解决此问题，但是在移动视口中，即使我只是在滚动，它仍会刷新页面。

我已经在网上搜索了是否有一种方法可以重新加载特定的jquery函数，但是找不到任何东西。 或说实话，我不太了解，也无法正常工作。 这是我发现的东西： https : //css-tricks.com/forums/topic/reload-jquery-functions-on-ipad-orientation-change/

我读到有一种方法可以使网站重新加载整个js文件。 但是由于页面上还有其他动画，所以我不知道这是否是最好的方法。

如果有人可以帮助我，我感到很高兴。 我对编码非常陌生，但我的js / jquery知识仍然非常有限/不存在。

这是我的酒吧动画脚本

  var $meters = $(".meter > span");
    var $section = $('#skills .meter');
    var $queue = $({});

    function loadDaBars() {
        $meters.each(function() {
            var $el = $(this);
            var origWidth = $el.width();
            $el.width(0);
            $queue.queue(function(next) {
                $el.animate({width: origWidth}, 800, next);
            });
        });
    }

    $(document).bind('scroll', function(ev) {
        var scrollOffset = $(document).scrollTop();
        var containerOffset = $section.offset().top - window.innerHeight;
        if (scrollOffset > containerOffset) {
            loadDaBars();
            $(document).unbind('scroll');
        }
    });

技能栏的宽度是通过div类定义的，跨度以％为单位。 也许对此有一个CSS解决方案？

编辑：这就是我的html和CSS代码的样子

 .meter { background-color: hsla(54, 73%, 95%, 1); vertical-align: bottom; width: 100%; position: relative; } .meter>span { display: block; background-color: rgb(241, 233, 166); position: relative; overflow: hidden; } 

 <div class="col-lg-6 col-md-6 col-sm-6"> <div class="meter"> <span style="width: 50%"></span> </div> 

Answer 1

动画完成后，您将删除栏的style属性。 这样，css规则将再次适用：

$el.animate({width: origWidth}, {duration: 800, complete: function (){$el.removeAttr('style')}}, next);

（假设CSS定义的宽度是响应性的）