如何使我的動畫技能欄響應

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定義的寬度是響應性的）