Указание на перемещение платы

Question

Я работаю над игрой, и я хотел бы указать движение, которое было только что сделано.

При загрузке страницы я хотел бы указать:

• Когда часть пришла из
• новое местоположение
• Кусок, который используют, чтобы быть в новом месте

Я пробовал, безуспешно, используя jquery fadein() и delay(). Следующий код представляет игровое поле. Верхняя средняя ячейка была частью, которая была просто перемещена в верхнюю правую клетку, заменив зеленую часть. Я попробовал различные способы скрыть вновь перемещенный (красный), пока старый (зеленый) кусок не исчезнет, ​​но не может понять это.

Актуальная информация fiddle.

Спасибо за любую помощь.

<table border="1" id="tbl"> 
<tr> 
    <td ></td> 
    <td bgcolor=#000000 > 

<img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-BlankRed-icon.png" id="fadeout1"/>   

    </td> 
    <td id="cap" class="items p1 p3 bg"> 

    <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Green-icon.png" id="fadeout2"/>   

     <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Red-icon.png" /></td>  
</tr> 

<tr>  
    <td bgcolor=#000000 ></td> 
    <td class="items p1"></td> 
    <td class="items p3" bgcolor=#000000 ></td> 
</tr> 

<tr>  
    <td class="piece" id="p1" ><img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Gray-icon.png" /></td> 
    <td bgcolor=#000000 ></td> 
    <td class="piece" id="p3" ><img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Gray-icon.png" /></td> 
</tr> 

</table> 

JQuery:

$("#fadeout1").show().delay(1000).fadeOut('slow') 
$("#fadeout2").show().delay(2000).fadeOut('slow') 

Answer 1

Вы могли бы попробовать что-то вроде этого: http://jsfiddle.net/turiyag/bLb3H/57/

Вместо того, чтобы изображения не появляются, только что они перекрывают друг друга, с позиции: абсолютный.

#tbl td { width:32px; height:32px; padding:0px; margin: 0px; vertical-align:top;} 
img {position:absolute; padding:0px; margin: 0px;} 

EDIT:

Я бы рекомендовал очистки кода как часть процесса поиска и устранения неисправностей. Посмотрите на Refactoring (http://en.wikipedia.org/wiki/Code_refactoring) для получения дополнительной информации. Мой любимый текст в этом отношении - (http://www.amazon.ca/Refactoring-Improving-Design-Existing-Code/dp/0201485672).

В вашем конкретном случае я хотел бы написать больше функций и перестроить ваши сценарии, чтобы более эффективно использовать преимущества jQuery. Примечательно, что я бы включил функцию для рисования таблицы, классов CSS для раскраски таблицы, расширений jQuery для получения координат x/y ячеек в таблице и функции для определения правильности ходов. Я сделал пример рефакторинга на основе вашего кода. Вы заметите, что это «самодокументирование». С простого взгляда легко понять, что делает код, даже без комментариев.

http://jsfiddle.net/turiyag/vCT9D/

$('#gameboard td').droppable({ 
    hoverClass: 'over', 
    activate: function (event, ui) { 
     isDragging = true; 
    }, 
    drop: function (event, ui) { 
     var img = ui.draggable; 
     if($(this).validMove()) { 
      movePiece(img, $(this)); 
      markValidMoves($(this)); 
     } else { 
      img.draggable('option', 'revert', true); 
     } 
     isDragging = false; 
    } 
});