1

我目前正在做一个项目，该项目需要用颜色填充汽车图像以表示维修完成百分比的进度，有点像加载 gif，但只有完成百分比，我将在页面设置负载。为了在所有浏览器中执行此操作，我使用了 jquery 和 animate，一张图像（没有颜色的汽车）作为背景图像，另一张图像（充满颜色的汽车）在它的顶部。在页面加载时，我试图显示部分彩色图像以创建正在填充的汽车的效果。这工作正常，但在动画完成后会显示完整图像，而我希望它在动画停止的地方停止。我的代码如下。

任何帮助都会很棒，因为我在谷歌上搜索过类似的东西，但找不到答案

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>repair progress</title>
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
        <style type='text/css'>
            li#home {
                background: url('carnotfilledin.jpg') no-repeat;
                z-index:-1;
                width: 214px;
                height: 398px;
            }
            #home a{
                display: block;
                padding-top:0px;
                width: 100%;
                height: 0px;
                position:relative;
                left:0px;
                top:-20px;
                left:-2px;
            }
            img.hover {
                display: none;
                width: 214px;
                height: 398px;
            }
            .nav {
                background-color:#292929;
                padding:20px;
            }
        </style>

        <script type='text/javascript'>//<![CDATA[ 
            $(window).load(function() {

                $('img.hover').css('display', 'block');
                $('#home a').animate({height: '20%'}, 2000);
            });//]]>  
        </script>
    </head>
    <body>
        <div class="nav">
            <ul>
                <li id="home"><a href="newpagelayout4.html"><img src="carfilledin.jpg" class="hover" ></a></li>
            </ul>
        </div>
    </body>
</html>
4

0 回答 0