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

Answer 2

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

以下方式申请：

list.get(0).setBrand(Brand);
list.get(0).setYear(Year);
list.get(0).setEngineSize(Enginesize);
list.get(0).setModel(Model);

<强> CSS：

<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>

检查：Fiddle.

使用jQuery填充进度条（拓宽div）

2 个答案: