How to add display:inline-block to jQuery fadeIn

I'm running into an issue where I am attempting to get inline-block elements to display: none on page load, but then I want them to fadeIn one by one in their original inline-block form. However, when I do a normal jQuery fadeIn the elements display as block.

My jQuery is like this right now:

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;
}

Is there something I can do to the jQuery to get these to fadeIn as inline-block elements?

Click here view more answers http://ift.tt/1RjSpX0