Javascript 用jQuery填充进度条（加宽div）

当元素出现在屏幕上时，我试图加宽一个div（模拟一个进程条）。我不能让任何事情发生。我做错了什么？我正在尝试使用：

jQuery

    $(document).ready(function() {

        $(window).scroll(function() {
            if ($('.progressFull').isOnScreen() == true) {
                $(this).animate({
                    'width': '1000%'
                }, 2000);
            }
        });
    });

html

    <div class="skillsCol">
        <ul>

            <li><a class="skill">C++</a>
                <div class="progress"></div>
                <div class="progressFull"></div>
            </li>

        </ul>
    </div>

---

此

引用了此处的窗口对象，您可能希望引用

.progress

或

.progressFull

元素

$('.progressFull').animate({ 'width' : '1000%' }, 2000);  

---

首先，您没有足够的高度来滚动。因此，未应用窗口滚动

采用以下方法：

<div class="skillsCol">
        <ul>

            <li><a class="skill">C++</a>
                <div class="progress"></div>
                <div class="progressFull"></div>
            </li>

        </ul>
    </div>
<div style="height: 2000px;"></div>

---

检查：

看起来您正在加宽窗口，而不是div.

$（此）。动画

会影响窗口，因为在前面两行的

$（窗口）

上运行命令。谢谢！当元素不再出现在屏幕上时，是否有办法将宽度重置回0？这种方式总是在按下滚动条后立即启动仪表a。我网站的这个部分在我的页面底部。是否有方法等待直到在视口中可见？这种方法总是在按下滚动条后立即启动仪表a。我网站的这个部分在我的页面底部。是否有方法等待，直到在视口中可见为止？@MattEm为此，您应该使用

窗口加载

，而不是jquery中的文档就绪。

<div class="skillsCol">
        <ul>

            <li><a class="skill">C++</a>
                <div class="progress"></div>
                <div class="progressFull"></div>
            </li>

        </ul>
    </div>
<div style="height: 2000px;"></div>

.skills {
        background - color: white;
    }
        .skillsCol li {
            list - style - type: none;
    }

    .skillsCol {
        width: 45 % ;
    position:fixed;
    top:0;
    left:0;
    right:0;
    }

    .progress {
        width: 0;
        height: 2 % ;
        margin - left: 50 % ;
        margin - top: -5.4 % ;
        border: 1px solid black;
        z - index: 1;
    }

    .progressFull {
        background: #7688A9;
        width: 0;
        height: 2%;
        margin-left: 50%;
        margin-top: -4.1%;
        z-index: 5;
    }