Question

我真的很想在我的网站上拥有that progress bar (click me to see bar code)，但是当我添加它时，它无法正常工作。

原始文件：

HTML：

<div class="progress-wrap progress" data-progress-percent="25">
  <div class="progress-bar progress"></div>
</div>

CSS：

.progress {
  width: 100%;
  height: 50px;
}
.progress-wrap {
  background: #f80;
  margin: 20px 0;
  overflow: hidden;
  position: relative;
  .progress-bar {
    background: #ddd;
    left: 0;
    position: absolute;
    top: 0;
  }
}

JS：

// on page load...
    moveProgressBar();
    // on browser resize...
    $(window).resize(function() {
        moveProgressBar();
    });

    // SIGNATURE PROGRESS
    function moveProgressBar() {
      console.log("moveProgressBar");
        var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
        var getProgressWrapWidth = $('.progress-wrap').width();
        var progressTotal = getPercent * getProgressWrapWidth;
        var animationLength = 2500;

        // on page load, animate percentage bar to data percentage length
        // .stop() used to prevent animation queueing
        $('.progress-bar').stop().animate({
            left: progressTotal
        }, animationLength);
    }

我已将这些行放入我的html文件中，只是为了链接这些文件：

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src='bar.js'></script>

我不知道我做错了什么或代码坏了吗？

请帮忙！ Mieciu

Answer 1

您提供的工作示例使用SCSS而不是CSS。在CSS中，类声明不能嵌套。如果您从.progress-bar中取出.progress-wrap声明，则可以。

http://jsfiddle.net/dvqfzfkk/1/

// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
  moveProgressBar();
});

// SIGNATURE PROGRESS
function moveProgressBar() {
  var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
  var getProgressWrapWidth = $('.progress-wrap').width();
  var progressTotal = getPercent * getProgressWrapWidth;
  var animationLength = 2500;

  // on page load, animate percentage bar to data percentage length
  // .stop() used to prevent animation queueing
  $('.progress-bar').stop().animate({
    left: progressTotal
  }, animationLength);
}

.progress {
  width: 100%;
  height: 50px;
}
.progress-wrap {
  background: #f80;
  margin: 20px 0;
  overflow: hidden;
  position: relative;
}
.progress-bar {
  background: #ddd;
  left: 0;
  position: absolute;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Change the below data attribute to play -->
<div class="progress-wrap progress" data-progress-percent="25">
  <div class="progress-bar progress"></div>
</div>

Javascript进度条不起作用

1 个答案: