Question

以下是我正在练习的一个稍微不那么简单的游戏的简化示例：

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 - 也许这就是为什么剩下的图像忽略它们并填充空间？我也尝试将图像放在一个自举网格中，但是还没有能够让它工作，并且更喜欢非自举解决方案。

Answer 1

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

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

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

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

FIDDLE

Answer 2

你有两个选择：

只需使用.fadeTo（）更改点击图片的不透明度（https://api.jquery.com/fadeTo/）这只是不透明度的变化（css - 动画的不透明度为0）
或者更难的方法如果你想删除图像本身，你可以交换它与div容器，例如具有相同的宽度，高度等使用例如jq function .replaceWith（）（http://api.jquery.com/replacewith/）

问候

Answer 3

Adeneo的答案完美地解释了正在发生的事情。为了进一步优化代码，我建议使用JS和一些CSS代替：

<强>的Javascript

$('.small').on('click',function(event){
  $(this).addClass('small--animation');
});

<强> CSS

.small {
  opacity: 1;
  transition: opacity .2s ease-in-out;
}
.small--animation {
  opacity: 0;
}

在jQuery fadeOut（）之后不要重新定位剩余的元素

我的问题：

3 个答案: