Question

我正在制作一个投资组合页面，我试图包含一个技巧栏，用jQuery动画宽度，但出现问题 - 没有任何反应。

HTML

<div class="skillbar clearfix" data-percent="89%">
              <div class="skillbar-title"><span>HTML5</span></div>
              <div class="skillbar-bar"></div>
              <div class="skill-bar-percent">89%</div>
            </div>

            <div class="skillbar clearfix" data-percent="87%">
              <div class="skillbar-title"><span>CSS3</span></div>
              <div class="skillbar-bar"></div>
              <div class="skill-bar-percent">87%</div>
            </div>

            <div class="skillbar clearfix" data-percent="58%">
              <div class="skillbar-title"><span>JavaScript</span></div>
              <div class="skillbar-bar"></div>
              <div class="skill-bar-percent">58%</div>
            </div>

            <div class="skillbar clearfix" data-percent="68%">
              <div class="skillbar-title"><span>jQuery</span></div>
              <div class="skillbar-bar"></div>
              <div class="skill-bar-percent">68%</div>
            </div>

            <div class="skillbar clearfix" data-percent="73%">
              <div class="skillbar-title"><span>Sass</span></div>
              <div class="skillbar-bar"></div>
              <div class="skill-bar-percent">73%</div>
            </div>

            <div class="skillbar clearfix" data-percent="82%">
              <div class="skillbar-title"><span>Bootstrap</span></div>
              <div class="skillbar-bar"></div>
              <div class="skill-bar-percent">82%</div>
            </div>

SASS

.skillbar
  position: relative
  display: block
  margin: 1.4rem auto
  width: 85%
  background: $col-gray
  height: 2.4rem
  border-radius: 3px
  transition: 0.1s linear
  transition-property: width, background-color
.skillbar-title 
  position: absolute
  top: 0
  left: 0
  width: 110px
  font-weight: bold
  font-size: 1rem
  color: #ffffff
  background: $col-darkgray
  border-top-left-radius: 3px
  border-bottom-left-radius: 3px
.skillbar-title span 
  display: block
  background: rgba(0, 0, 0, 0.1)
  padding: 0 20px
  height: 2.4rem
  line-height: 35px
  text-align: center
  border-top-left-radius: 3px
  border-bottom-left-radius: 3px
.skillbar-bar
  height: 2.4rem
  width: 0px
  background: $col-aqua
  border-radius: 3px
.skill-bar-percent 
  position: absolute
  right: 10px
  top: .3rem
  font-size: 1rem
  height: 1.4rem
  line-height: 1.5
  color: $col-light

的jQuery

$(document).ready(function(){
    $('.skillbar').each(function(){
        $(this).find('.skillbar-bar').animate({
            width:$(this).attr('data-percent')
        },4000);
    });
});

div应该从0px（在.skillbar-bar中定义）到data-percent的值（在HTML中定义）。

我的问题是，加载页面时绝对没有任何反应。

Answer 1

您的代码在 DEMO 中看起来很棒。请检查并具体告诉我们什么是错误的？

Answer 2

毕竟，事实证明这是一个糟糕的jQuery CND链接。我console.log-ed jQuery片段的单独元素，但一切正常，所以我没有费心检查控制台。对不必要的问题感到抱歉，谢谢你的帮助！

技巧栏与jQuery和Sass

2 个答案: