Фоновая картинка с перекрытием с jQuery

Question

Here is my working page. Я прикреплял кнопки к белому слону, и вы можете перемещаться, но левые изображения перекрываются правильными изображениями. Я думаю, проблема связана с CSS. Краткая структура здесь.

<script> 
     $(document).ready(function(){ 
      $('#top').click(function(){ 
       $('#p81').animate({top: "-=64px"}, 100); 
      }); 
</script> 
<style> 
     div.chess_board{ 
      height: 512px; 
      position: relative; 
      width: 512px; 
     } 
     div.chess_square{ 
      height:64px; 
      position: absolute; 
      width:64px; 
     } 
     div.chess_square.white { 
      background: none repeat scroll 0 0 #ffffff; 
     } 
      . 
      . 
      . 
     div.chess_piece{ 
       background-image: url("sprite.png"); 
       height: 64px; 
       width: 64px; 
       position: absolute; 
      } 
     div.chess_piece.bishot.white{ 
      background-position: -64px 0;   
     } 
</style> 

<div class="chess_board"> 
    <div id="b81" class="chess_square white" style="top: 448px; left: 64px;"> 
    <div class="chess_square_inner"></div> 
    <div id="p81" class="chess_piece bishot white"></div> 
    </div> 
</div> 
<input type="button" id="top" value="top" /> 

Answer 1

Вы получаете эффект перекрытия, потому что используете прозрачный PNG. Когда вы перемещаете положение епископа, он просто перемещается поверх ладьи. Вы можете сделать одно из следующего:

1. Двойной спрайт, чтобы иметь белый и серый фон. Затем перейдите в соответствующее пространство. PNG не будет прозрачным, поэтому вы его закроете.
2. Вы можете обновить свой jQuery, чтобы скрыть фон адресата, в данном случае ладью.

Пример Пункт 2: (Вы должны будете получить лукавый с селекторов)

$('#left').click(function(){ 
    $(piece).animate({left: "-=64px"}, 100); 
    $("#p80").css("background-image", "none"); 
}); 

UPDATE

Посмотрев на странице немного больше вы можете также разрешить его установив цвет фона div с помощью класса 'chess_piece'.

.chess_piece 
{ 
    background-color: #ffffff/#cfcfcf; 
} 

Вы можете сделать это с JQuery и Вашего мероприятия:

$('#left').click(function(){ 
    $(piece).animate({left: "-=64px"}, 100); 
    $(piece).css("background-color", "#cfcfcf"); 
}); 

UPDATE 2

Осмотрев Ваш комментарий, вопрос немного изменился. Чтобы преодолеть эту проблему, вам нужно добавить z-index к вашей части. Сгенерированная разметка будет примерно такой:

<div class="chess_piece bishot white" id="p81" style="top: -64px; left: 64px; z-index: 10000;"></div>