How to add display:inline-block to jQuery fadeIn

<p>I'm running into an issue where I am attempting to get inline-block elements to <code>display: none</code> on page load, but then I want them to fadeIn one by one in their original <code>inline-block</code> form. However, when I do a normal jQuery <code>fadeIn</code> the elements display as block.</p><p>My jQuery is like this right now:</p><pre><br /><code>function blueBoxDelays(){<br /> $('.fadeBlock1').delay(200).fadeIn(500);<br /> $('.fadeBlock2').delay(400).fadeIn(500);<br />};<br /></code><br /></pre><p>CSS</p><pre><br /><code>.dark-blue-box, .light-blue-box {<br /> height: 50%;<br /> width: 25%;<br /> display: inline-block;<br /> /*display: none; ********I replaced the inline-block with this.<br /> vertical-align: top;<br /> padding: 0;<br /> margin: 0;<br /> transition: all .8s ease-in-out;<br />}<br /></code><br /></pre><p>Is there something I can do to the jQuery to get these to <code>fadeIn</code> as <code>inline-block</code> elements?</p><br /><h2>Click here view more answers <a href="http://ift.tt/1RjSpX0">http://ift.tt/1RjSpX0</a></h2>