javascript - 如何使用 JQuery SlideDown 平滑地放下图像？

Question

我正在使用以下代码:

$(document).ready(function() {
    $('.some_class').slideDown(1000);
});

上面的代码可以工作，但是幻灯片有点粗糙且锯齿状。这并不顺利。你可以看出它卡住了几毫秒。

如何才能获得更简单的幻灯片效果？

我有一个整页背景图片。我正在 Firefox 和 Chrome 中进行测试。

背景图像作为 div 的一部分加载到正文中。 div 是 body 标签之后的第一个内容:

<div style="background-image:url('images/background.jpg');z-index:-2;position:fixed;height:100%;width:100%;display:none;" class="bg_load" id="bg"></div>


.bg_load:before {
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.6;
    position: fixed;
    right: 0;
    top: 0;
}
.bg_load:after {
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0 0 300px 300px rgba(0, 0, 0, 0.2);
    content: "";
    height: 2px;
    left: 50%;
    margin: 200px 0 0 -1px;
    opacity: 1;
    position: fixed;
    top: 25%;
    transition: opacity 0.15s linear 0s;
    width: 2px;
}
.bg_load {
    background-position: 50% 50%;
    background-size: cover;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
}

Answer 1

尝试使用 $(window).load() 而不是 $(document).ready() 作为 $(window).load() 将等待图像加载完成后再执行。如果您使用的图像相当大并且在 JQuery 开始向下滑动图像之前尚未加载，这可能会成为问题。

但是您问题中的更多信息确实有助于最好地解决此问题。