jquery - 表示棋盘移动

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>

j查询:

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

Answer 1

您可以尝试这样的操作:http://jsfiddle.net/turiyag/bLb3H/57/

不是让图像不出现，而是让它们重叠，position:absolute。

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

编辑:

我建议在故障排除过程中清理您的代码。查看重构 ( http://en.wikipedia.org/wiki/Code_refactoring ) 了解更多信息。在这方面我最喜欢的文字是 ( http://www.amazon.ca/Refactoring-Improving-Design-Existing-Code/dp/0201485672 )。

在您的具体情况下，我会编写更多函数，并重组您的脚本以更多地利用 jQuery 的优势。值得注意的是，我将包括一个绘制表格的函数、为表格着色的 CSS 类、用于检索表格中单元格的 x/y 坐标的 jQuery 扩展，以及一个确定移动有效性的函数。我已经根据您的代码做了一个重构示例。您会注意到它是“ self 记录”的。乍一看，即使没有注释，也很容易准确理解代码的作用。

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;
    }
});