Javascript 为什么文字在我的风格中闪烁？

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

var offsetTop=$（'#skills'）.offset（）.top；
函数animateskillbar（）{
$（“.bar”）。每个（函数（）{
var$bar=$（此），
$pct=$bar.find（“.pct”），
数据=$bar.data（“bar”）；
setTimeout（函数（）{
$bar
.css（“背景色”，data.color）
.制作动画({
“宽度”：$pct.html（）
}，data.speed | | 10，函数（）{
$pct.css({
“颜色”：data.color，
“不透明度”：1
});
});
}，data.delay | | 0）；
});
}
;（函数（$）{
“严格使用”；
$（窗口）。滚动（函数（）{
var height=$（window.height（）；
如果（$（窗口）.scrollTop（）+高度>偏移）{
animateSkillBars（）；
}
});
})（jQuery）；

---

演示：

添加一个布尔

动画

变量来检查它是否已经动画过一次似乎可以解决文本闪烁的问题。看起来您的文本在用户每次滚动时都会更新，这会导致文本闪烁

HTML:

---

添加一个布尔

动画

变量来检查它是否已经动画过一次似乎可以解决文本闪烁的问题。看起来您的文本在用户每次滚动时都会更新，这会导致文本闪烁

HTML:

---

这是因为每次运行函数时，

scrollTop

都大于变量

offsetTop

，您可以添加一些类来检查是否已经为bar或wrapper div运行它

---

这是因为每当

scrollTop

大于变量

offsetTop

时，您都会运行该函数。您可以添加一些类来检查是否已经为bar或wrapper div运行该函数

---

您正在设置一个全局变量，这是很危险的，因为如果元素位于页面的不同部分，在其中任何一个元素中设置动画都会禁用其余元素的动画，即使它们尚未滚动到视图中。@Terry:当

animateskillbar（）

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

animateskillbar（）

函数运行时，所有的条都会被设置动画。没有“滚动到视图”因子。已更新。使用与每个对象关联的JSON布尔值，而不是全局布尔值-无论项目是否已设置动画，都不应导致任何冲突。

<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>

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

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