删除其他图像后保留图像

Keeping images in place after others are removed?

本文关键字：图像 保留 删除 其他      更新时间：2023-09-26

我正在开发一个内存匹配游戏。现在，当用户单击两个相同的图像时，它们将被删除。游戏的这一部分工作正常。删除图像后，我希望其他图像保留在原位。然而，它们正在相互移动，而不是离开空间。

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

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

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

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

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

您需要

为您的td提供一些固定的大小：

<style>
    #playCards td { width: 200px; height: 200px; margin: 0; padding: 0 }
</style>
相关文章：