如何使用JQuery slideDown平穩地將圖像放下？

Question

我正在使用以下代碼：

$(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;
}

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示例

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