如何在图像褪色之前让jQuery添加一个占位符？

Question

I am using this to fade elements on my page:

 $(document).ready(function() {
         $('#holder').delay(650).fadeIn(1000);
         $('#sidepanelHolder').delay(650).fadeIn(1000);
         $('#bottomHolder').delay(1200).fadeIn(1000);
});

And this CSS to add a placeholder so the area isn't invisible then visible, moving whatever is under it:

.nope {
    display: none;  
    width: auto;
    height: auto;
}

HTML:

<article class="featureBottom">
     <div id="bottomHolder" class="nope">
       <img src="/images/features/one.jpg" width="100%" alt="" />
      </div>
</article>

I am leaving the id undefined, just using it for jQuery...

The fading images for #holder and #sidePanelHolder work fine, but the #bottomHolder is not working:

.featureBottom {
    max-width: 1400px;
    margin: 20px auto 20px auto;
    padding: 0;
    display: block; 
}

Is there an easier way to add placeholders that are the height and width of whatver you are fading, so that it fades without going from hidden to block , moving elements down the page underneath the faders.

Hope that makes sense :-)

Thanks in advance

EDIT:

This is the page before the image fades:

The placeholder is not present here. The S's and the footer (change of background texture) are close together.

Then the image loads:

Pushing the footer down, the auto height & width for .nope is not obeyed here, like they are for my other two faders on the same page: holder and sidepanelHolder .

Answer 1

Use a callback or several callbacks. That way the others don't start their fadeIn until the first is done. See this post .

A call back changes your code to look like this

 $(document).ready(function() {
         $('#holder').delay(650).fadeIn(1000,function(){
             $('#sidepanelHolder').delay(650).fadeIn(1000);
             $('#bottomHolder').delay(1200).fadeIn(1000);
         });         
});

If you want your footer to stay at the bottom of the page the entire time, try this trick from CSS-Tricks https://css-tricks.com/snippets/css/sticky-footer/