javascript - 用 jQuery 填充进度条(加宽 div)

Question

当元素在屏幕上时，我试图加宽一个 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>

CSS

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

    .skillsCol {
        width: 45 % ;
    }

    .progress {
        width: 25 % ;
        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;
    }

Answer 1

this 指的是那里的窗口对象，您可能想指的是 .progress 或 .progressFull 元素。

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