2

我已经按照我获得信息的网站的说明进行操作，现在我被卡住了。代码如下：

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

当我在 chrome 中加载 JavaScript 文件时出现错误

未捕获的类型错误：无法调用 null 的方法“数据”

我不知道下一步该做什么。我已经在 Google 上进行了广泛的搜索，但我对 JavaScript 的了解正在慢慢消失。

4

1 回答 1

0

您的代码运行没有错误。我只是从这里更改了 HTML 部分：

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

对此

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

使动画可见。

在那里你有工作JSFiddle。

根据您提供的错误消息，我会说您在其他地方有问题。

于 2013-05-09T13:44:44.443 回答