为什么文本在我的风格中闪烁？答案

【问题标题】：Why is Text blinking in my style?为什么文本在我的风格中闪烁？
【发布时间】：2017-08-11 16:53:30
【问题描述】：

几个小时后，在几个人的帮助下，我设法用脚本解决了这个问题。
但是，我再次发现样式有问题。
我的问题在哪里？为什么相关文字会闪烁？

 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/

【问题讨论】：

标签： javascript jquery html css scrolltop

【解决方案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 );

【讨论】：

【解决方案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/

【讨论】：

您正在设置一个全局变量，这很危险，因为如果元素位于页面的不同部分，在其中任何一个中设置动画都会禁用其余部分的动画，即使它们尚未滚动到视图中。
@Terry：当animateSkillBars() 函数运行时，所有条形图都被动画化了。没有“滚动到视图”因素。
已更新。而不是全局布尔值，而是使用与每个对象关联的 JSON 布尔值 - 项目是否具有动画效果，这不会导致任何冲突。