jQuery fadeOut（）之后不要重新定位其余元素

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，display style屬性將設置為none ，因此該元素不再影響頁面的布局。

這就是導致問題的原因，當顯示設置為none ，圖像從“流”中刪除。

您可以改用jQuery的fadeTo ，它只會淡化到一定程度的不透明，並且不會設置顯示。

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

小提琴

Answer 2

您至少有兩個選擇：

1. 只需使用.fadeTo（）（ https://api.jquery.com/fadeTo/ ）更改單擊圖像的不透明度，即更改不透明度（css-動畫的不透明度為0）

2. 如果您要刪除圖像本身，則可以使用更硬的方法，例如，可以使用jQuery函數.replaceWith（）（ http://api.jquery.com/replacewith/ ）與具有相同寬度，高度等的div容器交換圖像。

問候

Answer 3

Adeneo的回答完美地解釋了正在發生的事情。 為了進一步優化您的代碼，我建議使用JS和一些CSS：

Java腳本

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

的CSS

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