1

我正在开发一款游戏，我想指出刚刚做出的动作。

当页面加载时，我想指出：

  • 这件作品来自哪里
  • 新地点
  • 曾经在新位置的作品

我尝试过使用 jquery fadein() 和 delay()，但没有成功。以下代码代表棋盘。顶部中间的单元格是刚刚移动到右上角单元格的部分，取代了绿色部分。我尝试了各种方法来隐藏新移动的（红色），直到旧的（绿色）部分消失，但无法弄清楚。

这是当前的小提琴。

谢谢你的帮助。

<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')
4

1 回答 1

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;
    }
});
于 2013-02-08T19:54:13.343 回答