为什么文本以我的风格闪烁？ [英] Why is Text blinking in my style?

问题描述

几个小时后，在几个人的帮助下，我设法解决了脚本的问题。

但是我又发现了一个样式问题。

Where是我的问题？为什么相关文本会闪烁？

var offsetTop = $（'＃skills'）。offset （）。最佳;
函数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）;

}）;

$ b $（b
$ b $ use b
$（window）.scroll（function（）{
var height = $（window）.height（）;
if（$（window）.scrollTop（）+ height> offsetTop）{
animateSkillBars（）;
}
}） ;

}）（jQuery）;


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

解决方案

每次运行函数 scrollTop 大于变量 offsetTop 时，可以添加一些类来检查是否已经运行它为酒吧或包装div

https：/ /jsfiddle.net/bo3ggtx5/4/

  var offsetTop = $（'＃skills'）。offset（ ）。最佳; 
函数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'）; 
}）; 
 
 $ b $（b 
 $ b $ use b 
 $（window）.scroll（function（）{
 var height = $（window）.height（）; 
 if（$（window）.scrollTop（）+ height> offsetTop）{
 animateSkillBars（）; 
} 
}） ; 
 
}）（jQuery）; 
  

After several hours and with the help of several people, I managed to solve the problem with the script.
But again, I found a problem with the style.
Where is my problem? Why does the relevant text blink?

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

demo: https://jsfiddle.net/bo3ggtx5/3/

解决方案

Its because you run the function everytime the scrollTop is bigger than the variable offsetTop you can add some class to check if you already run it for the bar or to wrapper 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 );

这篇关于为什么文本以我的风格闪烁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！