如何淡入顯示：內嵌塊

在我的頁面中，我有一堆應該添加不可見的DOM節點（大約30個），並在完全加載時淡入。
這些元素需要顯示：內嵌塊樣式。如何淡入顯示：內嵌塊

我想使用jquery .fadeIn（）函數。這要求元素最初有一個顯示：無;規則最初隱藏它。在fadeIn（）之後的元素具有默認顯示：inherit;

如何使用淡入淡出功能與繼承以外的顯示值？

您可以使用jQuery的animate函數自己更改不透明度，使顯示不受影響。

2009-07-07 09:53:51 philnash

我更喜歡這個解決方案，保持CSS我的JS。 – joshuadelange 2013-07-17 15:30:28

+10

@joshuadelange不是真的，不透明度也是CSS – Roy 2014-02-10 22:13:53

+1，用於將顯示/隱藏元素的工程過程集中到應該在的位置。 – blackhawk 2014-05-15 20:17:59

只是爲了充實菲爾的好主意，這裏是一個淡入（）加載淡入與轉.faded類中的每個元素，轉化爲動畫（）：

老：

$(".faded").each(function(i) { 
    $(this).delay(i * 300).fadeIn(); 
});

新：

$(".faded").each(function(i) { 
    $(this).delay(i * 300).css('opacity',0).animate({'opacity': 1}, 500); 
});

希望能夠幫助其他的jQuery福利局像我一樣:) 如果有更好的方法來做到這一點，請告訴我們！

2011-11-19 10:30:12

202

$("div").fadeIn().css("display","inline-block");

2012-04-25 19:44:20 MakuraYami

按照jQuery docs爲.show()，

如果一個元素具有內嵌的顯示值，則隱藏和示出，但是將再次被顯示的內聯。

所以我解決這個問題的方法是將一個css規則應用到類的顯示上：inline-block在元素上，然後我添加了另一個名爲「hide」的類，它應用display：none;當我在元素.show()上時，它顯示爲內聯。

2013-08-05 18:13:46 amurrell

Makura的回答並沒有爲我工作，所以我的解決辦法是

<div id="div" style="display: none">Some content</div> 

$('#div').css('display', 'inline-block').hide().fadeIn();

hide立即應用display: none但在此之前，它保存在其中將通過後續的動畫調用恢復jQuery的數據緩存中的當前顯示值。

所以div開始靜態定義爲display: none。然後它被設置爲inline-block，並立即隱藏只是褪色回inline-block

2014-01-27 16:55:43

即使用css預設的display:none也可以使用。使用

$('#element').fadeIn().addClass('displaytype');

（也$('#element').fadeOut().removeClass('displaytype');）

與設置在CSS：

#element.displaytype{display:inline-block;}

我認爲這是一個解決辦法，因爲我相信fadeIn()應該工作，以便它只是刪除了最後一條規則 - display:none當設置爲#element{display:inline-block;display:none;}時，但它故障地刪除兩者。

2018-01-23 12:34:55 Fanky

回答