Jquery fadeIn fadeOut 向上滚动页面

Question

我知道之前已经有人问过这个问题，但该解决方案不符合我的要求。

HTML

<div id="slider" class="contentPanel">
    <div class="content">
        <img src="images/slide1.jpg" alt="aliyah creations">
    </div>

    <div class="content">
        <img src="images/slide2.jpg" alt="aliyah creations">
    </div>

    <div class="content">
        <img src="images/slide3.jpg" alt="aliyah creations">
    </div>
</div>

JS

function fadeContent() {
   $(".contentPanel .content:hidden:first").fadeIn(500).delay(5000).fadeOut(500, function() {
       $(this).appendTo($(this).parent());
       fadeContent();
   });
};

fadeContent();

上面的代码工作正常，除非您滚动到页面底部，并且当调用 fadeIn 时，它会自动将页面滚动到 div 顶部。

以前的解决方案是设置 div 的固定高度，但我希望网站根据用于查看它的屏幕分辨率进行响应。

这是CSS

#slider{
    float:left;
    height:auto;
    width:100%;
    border-style: none;
    position:relative;
    margin: 0px;
}

.content { 
    float:left;
    max-height:400px;
    width:100%;
    background-color:black;
    background-size: 50% auto;
    text-align:center;
    display: none; 
}

.content img{
    max-width:100%;
}

下面是该网站的链接

(已删除链接)

Answer 1

抱歉，您的网站链接对我不起作用，它只是不断加载，但我认为这是图像 slider 类型的东西，所以:

您可以使用占位符透明图像来填充淡出图像区域的空间。因为您的网站是响应式的(也许)。您需要使该占位符文件与图像具有相同的宽高比，或者使其与图像具有相同的大小。因此占位符图像将确保该区域始终具有高度。淡入淡出时，内容不会变短或变高，因为占位符与其他图像具有相同的大小或相同的长宽比。

如果您使用具有相同宽高比的图像，则其宽度应为 100%，以便它扩展容器的宽度，就像幻灯片放映图像一样。这是我使用过的实现，可能有更好的方法来做到这一点，但我认为这个解决方案相当简单，不需要 js，只有 1 个额外的图像，如果你采用纵横比方式，可能会非常小。

类似的东西

<div id="slider" class="contentPanel">
    <div class="content">
        <img src="images/slide1.jpg" alt="aliyah creations">
    </div>

    <div class="content">
        <img src="images/slide2.jpg" alt="aliyah creations">
    </div>

    <div class="content">
        <img src="images/slide3.jpg" alt="aliyah creations">
    </div>
    <div class="placeholder">
        <img src="images/placeholder.jpg" alt="aliyah creations">
    </div>
</div>

然后将相同的 CSS 应用于占位符 div，它应该可以工作