javascript - 如何添加显示:inline-block to jQuery fadeIn

Question

我遇到了一个问题，我试图将内联 block 元素添加到 display: none在页面加载时，但随后我希望它们在其原始 inline-block 中一个接一个地淡入形式。但是，当我执行普通的 jQuery fadeIn 时元素显示为 block 。

我的 jQuery 现在是这样的:

function blueBoxDelays(){
    $('.fadeBlock1').delay(200).fadeIn(500);
    $('.fadeBlock2').delay(400).fadeIn(500);
};

CSS

.dark-blue-box, .light-blue-box {
    height: 50%;
    width: 25%;
    display: inline-block;
    /*display: none;   ********I replaced the inline-block with this.
    vertical-align: top;
    padding: 0;
    margin: 0;
    transition: all .8s ease-in-out;
}

我可以对 jQuery 做些什么来将它们发送到 fadeIn作为inline-block元素？

Answer 1

你可以试试这个，

$(document).ready(function(e) {

    $('.fadeBlock').css('display','none');
    
    blueBoxDelays();
    
    function blueBoxDelays(){
	var delay = 0;
	$('.fadeBlock').each(function(i){
	   $(this).delay(400+delay).fadeIn(1000);
	   delay = 400*(i+1);
	});
   };
});

.fadeBlock {
    height: 100px;
    width: 100px;
    display: inline-block;
}
.dark-blue-box{
  background-color: blue;
}
.light-blue-box{
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dark-blue-box fadeBlock"></div>
<div class="light-blue-box fadeBlock"></div>
<div class="dark-blue-box fadeBlock"></div>
<div class="light-blue-box fadeBlock"></div>
<div class="dark-blue-box fadeBlock"></div>
<div class="light-blue-box fadeBlock"></div>

DEMO

注意:

移除 .dark-blue-box, .light-blue-box 的不透明度>