移除其他图像后保留图像？

Question

我正在开发一款记忆匹配游戏。现在，当用户点击两个相同的图像时，它们将被删除。这部分游戏运行正常。删除图像后，我希望其他图像保留在原位。然而，他们正朝着彼此的方向转移而不留空间。

演示：http://jsfiddle.net/kevinferri/bCP4G/

例如，单击中间列中的两个花。您将看到两个外部列将相互移位并填充该空白区域。如何更改它以便在删除其他图像后图像保留在原位？

Answer 1

如果您希望DOM记住其原始布局间距和大小，您可能不希望成为.remove()元素。你只想将这些元素放入隐藏的可见性中，以便它们被隐藏，但它们保持其大小和位置。

$(element).css('visibility', 'hidden');

CSS中的visibility:hidden。请注意它与.show() / .hide()甚至CSS display:none之间的区别。

Answer 2

您需要为td提供一些固定的尺寸：

<style>
    #playCards td { width: 200px; height: 200px; margin: 0; padding: 0 }
</style>