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

以下是该网站的链接。

（已删除链接）

- user2689642

---

卷轴上的内容很可能因为页面缩短而产生变化，因为淡化的图像已经消失。 - Huangism

正是 @Huangism 所说的。Fade 将会隐藏一个 div 并显示另一个，所以它将使 body 变小然后再变大。您需要 .contentPanel 具有固定高度或 js 代码来检查所有 .content img 的高度并根据最大图像动态添加高度到 .contentPanel - RaphaelDDL

Answer 1

对不起，你的网站链接无法打开，一直在加载，但我猜这是一种图像轮播类型的东西，所以：

您可以使用一个透明的占位符图像来填充淡出图像区域的空白处。由于您的网站是响应式的（可能）。您需要使此占位符文件与图像具有相同的纵横比，或将其大小设置为与图像相同。因此，占位符图像将确保该区域始终具有高度。当淡出时，内容不会变得更短或更长，因为占位符与其他图像具有相同的大小或相同的纵横比。

如果您使用具有相同纵横比的图像，则其宽度应为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，它应该就能正常工作了。

- Huangism

---

非常感谢！工作正常，不确定为什么链接不起作用 :S - user2689642

它花了很长时间，所以我关闭了窗口，如果我等待更长时间，它可能会起作用，但我正在工作。 - Huangism