javascript - jQuery fadeOut()之后不要重新定位其余元素

以下是我正在练习的简单游戏的简化示例：

HTML：

<div>
    <img class="small" src="http://vignette4.wikia.nocookie.net/rickandmorty/images/d/dd/Rick.png/revision/latest?cb=20131230003659">
    <img class="small" src="https://ih0.redbubble.net/image.111135319.1949/flat,800x800,075,f.u1.jpg">
    <img class="small" src="http://67.media.tumblr.com/c38fff03b8dd7aaf75037eb18619da57/tumblr_n436i3Falo1sndv3bo1_1280.png">
</div>

Javascript：

$(".small").click(function() {
    $(this).fadeOut();
});

它在JSFiddle中：https://jsfiddle.net/rzu1yvpa

我的问题：

当我单击其中一张图像时，它会按预期淡出，但根据消失的图像，将其余图像重新定位以填充空白区域。其他图像淡出后，如何使其余图像保持其位置？我已经搜索并尝试了一段时间，但是我对所有事物都是陌生的，并且不确定我应该寻找什么。

我尝试更改position和display属性，但到目前为止没有任何效果。看起来fadeOut()将淡出的元素的display属性设置为none-也许这就是为什么其余图像忽略它们并填充空间的原因？我也尝试过将图像放在引导网格中，但也无法使其正常工作，因此我希望使用非引导解决方案。

最佳答案

jQuery的.fadeOut()和.fadeIn()方法为匹配元素的不透明度设置动画，一旦不透明度达到0，显示样式属性将设置为none，因此该元素不再影响页面的布局。

这就是导致问题的原因，当显示设置为none时，图像从“流”中删除。

您可以改用jQuery的fadeTo，它会逐渐淡化到不透明的程度，并且不会设置显示。

$(".small").click(function() {
    $(this).fadeTo(600,0);
});

FIDDLE

关于javascript - jQuery fadeOut()之后不要重新定位其余元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40751618/