Question

我使用以下代码：

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

上面的代码可以工作，但是slideDown有点粗糙和锯齿状。这不顺利。你可以告诉它卡住了几毫秒。

我可以做些什么来实现更轻松的slideDown效果？

我有一整页背景图片。我正在使用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开始向下滑动图像之前未加载图像，则可能会出现问题。

但是，你问题中的更多信息真的有助于解决这个问题。

Answer 2

如果图像很大，有时尝试为图像设置动画可能会生涩。如果浏览器必须重新渲染图像，那么它就不会非常流畅。

您可以尝试为图片创建容器div，将其设置为overflow:hidden并为容器的高度设置动画。这适用于任何内容 - 不仅仅是图像。

<强> CSS：

.container {
    overflow:hidden;
    height:0px;
    width:220px;
}

<强> HTML：

<div class="container">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg">
</div>

<强> JavaScript的：

$(document).ready(function() {
    $(".container").animate({"height":"293px"},1000);
});

工作示例： http://jsfiddle.net/nyuz9/

Answer 3

我建议使用jQuery简单地切换一个类，并使用CSS3过渡处理动画。 CSS3充分利用了浏览器硬件加速的强大功能，因此它会更加流畅。

我已经分享了ElliotB的例子并提供了CSS过渡的例子。如果我自己这么说的话，那就太顺利了。

JSFiddle example

<强> HTML

<div class="container">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" />
</div>

<强>的jQuery

$(document).ready(function() {
    $(".container").addClass("visible");
});

<强> CSS

.container {
  overflow:hidden;
  height:0px;
  width:220px;

  -webkit-transition: height 1s ease-in-out;
     -moz-transition: height 1s ease-in-out;
          transition: height 1s ease-in-out;
}

.container.visible {
  height: 293px;
}

如何使用JQuery slideDown平滑地显示图像？

3 个答案: