Question

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

任何帮助都会很棒，因为我在google上搜索类似的内容但无法找到答案

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

如何使用jquery和animate在另一个图像上显示部分图像（显示背景）

0 个答案: