如何使我的動畫技能酒吧響應

我在我的網站上有一個動畫技能欄，當該部分滾動到視圖中時會觸發。到目前爲止，一切運作良好。除了當視口改變/窗口大小時，動畫條不會適應它，並且會太長或太短。如何使我的動畫技能酒吧響應

我試着用 $(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'); 
     } 
    });

爲skillbar寬度是通過在DIV％階層和跨度定義的腳本。也許有一個CSS的解決方案呢？

編輯：這是我的HTML和CSS代碼看起來像

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

    .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; 
    }

來源

2017-09-16 Trang H

您刪除了吧樣式屬性一旦動畫完成。這樣的CSS規則將再次申請：

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

（假設由CSS定義的寬度爲響應）

來源

2017-09-16 13:59:01

的skillbar確實響應了，感謝了很多的！問題是，動畫完成後，每個小節都會加載到100％。我怎樣編碼它，所以它停在我設定的百分比上？ –

如何使我的動畫技能酒吧響應

回答

相關問題