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

修改

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

在您的特定情况下，我会编写更多函数，并重新构建脚本以更大程度地利用jQuery的优势。值得注意的是，我将包括一个绘制表的函数，用于为表着色的CSS类，用于检索表中单元格的x / y坐标的jQuery扩展，以及用于确定移动有效性的函数。我根据你的代码做了一个重构的例子。你会注意到它是“自我记录”。从简单的一眼就可以很容易地理解代码的作用，即使没有注释也是如此。

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

表明董事会的举动

1 个答案: