為什么文本以我的風格閃爍？

Question

幾個小時后，在幾個人的幫助下，我設法用腳本解決了這個問題。
但是我再次發現樣式問題。
我的問題在哪里？ 為什么相關文字會閃爍？

 var offsetTop = $('#skills').offset().top;
function animateSkillBars() {
  $( ".bar" ).each( function() {

          var $bar = $( this ),
               $pct = $bar.find( ".pct" ),
               data = $bar.data( "bar" );

          setTimeout( function() {

              $bar
                  .css( "background-color", data.color )
                  .animate({
                      "width": $pct.html()
                  }, data.speed || 10, function() {

                      $pct.css({
                          "color": data.color,
                          "opacity": 1
                      });

                  });

          }, data.delay || 0 );           

      });
}

;( function( $ ) {
    "use strict";
    $(window).scroll(function() {
    var height = $(window).height();
        if($(window).scrollTop()+height > offsetTop) {
            animateSkillBars();
        }
    });

})( jQuery );

演示： https : //jsfiddle.net/bo3ggtx5/3/

Answer 1

這是因為您每次在scrollTop大於變量offsetTop時都運行該函數，因此可以添加一些類來檢查是否已針對bar或包裝div運行它

https://jsfiddle.net/bo3ggtx5/4/

var offsetTop = $('#skills').offset().top;
function animateSkillBars() {
  $( ".bar" ).each( function() {

          var $bar = $( this ),
               $pct = $bar.find( ".pct" ),
               data = $bar.data( "bar" );

          if(!$(this).hasClass('animated')) {
            setTimeout( function() {

                $bar
                    .css( "background-color", data.color )
                    .animate({
                        "width": $pct.html()
                    }, data.speed || 10, function() {

                        $pct.css({
                            "color": data.color,
                            "opacity": 1
                        });

                    });

            }, data.delay || 0 );           
          }

          $(this).addClass('animated');
      });
}

;( function( $ ) {
    "use strict";
    $(window).scroll(function() {
    var height = $(window).height();
        if($(window).scrollTop()+height > offsetTop) {
            animateSkillBars();
        }
    });

})( jQuery );

Answer 2

添加一個布爾animated變量來檢查它是否曾經被動畫過一次似乎可以解決閃爍文本的問題。 看起來您的文本在用戶每次滾動時都會更新，這導致文本閃爍。

HTML：

<li>
    PHP
    <div class="bar_container">
        <span class="bar" data-bar='{ "color": "#9b59b6", "delay": 1200, "animated": false}'>
            <span class="pct">60%</span>
        </span>
    </div>
</li>

JavaScript的：

function animateSkillBars() {
    $( ".bar" ).each( function() {

       var $bar = $( this ),
           $pct = $bar.find( ".pct" ),
           data = $bar.data( "bar" );

       if (!data.animated) {
          setTimeout( function() {
               $bar
                  .css( "background-color", data.color )
                  .animate({"width": $pct.html()
              }, data.speed || 10, function() {

                  $pct.css({
                      "color": data.color,
                      "opacity": 1
                  });

              });
             data.animated = true;      
          }, data.delay || 0 );
      }
  });
}

;( function( $ ) {
    "use strict";
    $(window).scroll(function() {
    var height = $(window).height();
        if($(window).scrollTop()+height > offsetTop) {
            animateSkillBars();
        }
    });

})( jQuery );

https://jsfiddle.net/bo3ggtx5/8/