jquery - 在区域图上叠加图像

Question

好的，我正在使用 pp3Diso 构建一个小游戏。我试图让它像大多数其他社交游戏一样使用计时器来构建和东西。我有一个计时器倒计时工作没有问题。我的问题出现在试图在建筑物上叠加一点构建动画。 pp3Diso 像这样呈现 map 的 html:

<div id="ppISO">
    <div id="pp3Diso-conteneur" style="position: absolute; top: 72px; left: 35px; width: 1183px; height: 598px;">
        <div id="pp3diso-clicks" style="z-index: 750000; position: absolute; left: 0px; top: 0px; display: block;">
            <img width="1183" height="598" alt="" id="pp3diso-mapControl" src="../assets/images/city/vide.gif" usemap="#pp3diso-Map-1">
            <map id="pp3diso-Map-1" name="pp3diso-Map-1">
                <area alt="" coords="500,45,591,0,682,45,591,90" shape="poly" class="pp3diso-shap" id="s_1_1">
                <area alt="" coords="591,90,682,45,773,90,682,135" shape="poly" class="pp3diso-shap" id="s_1_2">
                ...
            </map>
        </div>

        <div class="pp3diso-sol" id="c_1_1" style="z-index: 4; position: absolute; left: 500px; top: 0px; width: 182px; height: 92px; background-image: url("../assets/images/city/city-1.png"); display: block; background-size: 100% 100%;"></div>
        <div class="pp3diso-sol" id="c_1_2" style="z-index: 6; position: absolute; left: 591px; top: 45px; width: 182px; height: 92px; background-image: url(&quot;../assets/images/city/city-2.png&quot;); display: block; background-size: 100% 100%;"></div>
        ...

        <div id="pp3diso-cursor" style="z-index: 299000; position: absolute; left: 230px; top: 227px; display: block;">
            <img width="182" height="92" alt="" src="../assets/images/city/cursor-off.png" id="pp3diso-cursor-img" rel="182:92">
        </div>
        <div class="pp3diso-batiment" id="b_1_1" rel="../assets/images/city/wall/wood/corner.png:26:-47" style="z-index: 300004; position: absolute; left: 526px; top: -47px; display: block;">
            <img alt="" src="../assets/images/city/wall/wood/corner.png" rel="141:135:undefined:undefined" style="width: 141px; height: 135px;">
        </div>
        <div class="pp3diso-batiment" id="b_2_1" rel="../assets/images/city/wall/wood/1.png:20:-40" style="z-index: 300006; position: absolute; left: 429px; top: 5px; display: block;">
            <img alt="" src="../assets/images/city/wall/wood/1.png" rel="131:125:undefined:undefined" style="width: 131px; height: 125px;">
        </div>
    </div>
</div>

包含在 .pp3diso-batiment div 中的图像位于 map 的 area 元素之上(或者它可能在 area 元素后面？)，它使用 .pp3diso-sol div 作为背景。我试图将图像覆盖在 .pp3diso-batiment div 内的图像上、.pp3diso-batiment div 本身、背景 div 和区域。我应该瞄准什么以及我应该使用什么方法，因为我在这里不知所措。

这是我在发帖之前尝试的当前方法(用构建动画替换 .pp3diso-batiment div 中包含的图像):

timer: function(type, timeLeft, timeTotal){
    var $timer = $('#timers #'+type),
        $building = $('#b_'+Map.city.currentBuild.x+'_'+Map.city.currentBuild.y+' img'),
        progressBarWidth = (timeTotal-timeLeft) * ($timer.width() / timeTotal),
        oldSrc = $building.attr('src');

    $timer.css('display', 'block').find('div').animate({ width: progressBarWidth }, timeLeft == timeTotal ? 0 : 1000, "linear").html(timeLeft + ' s');
    $building.attr('src', 'assets/images/city/buildingAnimation.gif');

    if(timeLeft > 0){
        setTimeout(function(){
            Page.timer(type, timeLeft - 1, timeTotal);
        }, 1000);
    }else{
        $timer.css('display', 'none');
        $building.attr('src', oldSrc);
    }
}

Answer 1

原来我没有为我附加的建筑动画跨度设置高度和宽度:

jQuery:

timer: function(type, timeLeft, timeTotal){
    var $timer = $('#timers #'+type),
        $building = $('#b_'+Map.city.currentBuild.y+'_'+Map.city.currentBuild.x),
        progressBarWidth = (timeTotal-timeLeft) * ($timer.width() / timeTotal),
        buildAnim = $('<span class="buildAnimation"></span>');

    $timer.css('display', 'block').find('div').animate({ width: progressBarWidth }, timeLeft == timeTotal ? 0 : 1000, "linear").html(timeLeft + ' s');
    if($('.buildAnimation').length == 0){
        $building.prepend(buildAnim);
    }

    if(timeLeft > 0){
        setTimeout(function(){
            Page.timer(type, timeLeft - 1, timeTotal);
        }, 1000);
    }else{
        var q = 'mode=building&sub=finished&id='+Map.city.currentBuild.id;
        Page.ajaxCall('city', q, function(data){
            if(data.result){
                $timer.css('display', 'none');
                $('span.buildAnimation').remove();
            }
        });
    }
}

CSS:

.buildAnimation {
    background: url(../images/city/buildingAnimation.gif) no-repeat;
    z-index: 990000;
    position: absolute;
    top: 40px;
    left: 50px;
    width: 40px;
    height: 40px;
}