jquery - 如何让 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 和页脚(背景纹理的变化)靠得很近。

然后图像加载:

将页脚向下推，.nope 的 auto 高度和宽度在这里没有得到遵守，就像我在同一页上的其他两个推子一样: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/