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

Question

我使用它来淡化页面上的元素：

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

这个CSS添加一个占位符，因此该区域不可见，然后可见，移动其下的任何内容：

.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>

我要离开id未定义，只是将它用于jQuery ...

#holder和#sidePanelHolder的淡入淡出图片效果很好，但#bottomHolder无效：

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

是否有一种更简单的方法来添加占位符，这些占位符是您正在淡化的高度和宽度，因此它会在没有从hidden到block的情况下消失，在推子下方向下移动元素

希望有道理： - ）

提前致谢

编辑：

这是图像淡出之前的页面：

占位符不在此处。 S＆s和页脚（背景纹理的变化）紧密相连。

然后图片加载：

将页脚向下推，auto高度＆amp;此处未遵循.nope的宽度，就像我们在同一页面上的其他两个推子一样：holder和sidepanelHolder。

Answer 1

使用回调或多个回调。这样，其他人在第一次完成之前不会开始淡化。请参阅this post。

回拨会将您的代码更改为

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

如果您希望您的页脚一直停留在页面底部，请尝试使用CSS-Tricks https://css-tricks.com/snippets/css/sticky-footer/