0

我正在使用以下代码：

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

上面的代码有效，但 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;
}
4

3 回答 3

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/

于 2013-08-16T21:03:11.113 回答
2

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

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

于 2013-08-16T21:01:16.627 回答
0

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

我已经分叉了 ElliotB 的示例并提供了 CSS 转换的示例。非常顺利，如果我自己这么说的话。

JSFiddle 示例

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;
}
于 2013-08-16T21:02:03.193 回答