私のアニメーションスキルバーを反応させる方法

Question

私のウェブサイトにはスキルバーがあります。これまでのところすべてがうまくいっています。 ビューポートの変更/ウィンドウのサイズ変更を除いて、アニメーションバーは調整されず、長すぎるか短くなります。

私は $(window).resize(function(){location.reload(); でこの問題を解決しようとしましたが、モバイルビューポートではスクロールしていてもページを更新し続けます。

私は既に特定のjquery関数をリロードする方法があるかどうかを確認するためにネットを検索しましたが、何も見つかりませんでした。あるいは、正直言って私は私が推測したことをあまり理解しておらず、それを働かせることができませんでした。 ここに私が見つけたものがあります：https://css-tricks.com/forums/topic/reload-jquery-functions-on-ipad-orientation-change/

私は、ウェブサイトをjsファイル全体をリロードする方法があります。しかし、私はまだ私のページに他のアニメーションを持っているので、これを実行する最良の方法であるかどうかはわかりません。

誰もが私を助けてくれると嬉しいです。私は非常にコーディングし、私のjs/jqueryの知識はまだ非常に限られている/存在しない新しいです。ここ

はskillbarのための幅は％でのdivクラスとスパンを経由して定義されているバーのアニメーション

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

のための私のスクリプトです。 これには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; 
    } 

Answer 1

どのように見えるかです。 CSSルールが再び適用されます。この方法：

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

（CSSで定義された幅と仮定すると応答性である）