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

as$(window).load()の代わりに使用してみてください。実行する前に画像の読み込みが完了するのを待ちます。これは、使用している画像がかなり大きく、JQuery が画像を下にスライドし始める前に読み込まれていない場合に問題になる可能性があります。$(document).ready()$(window).load()

しかし、あなたの質問のより多くの情報は、この問題を最もよく解決するのに本当に役立ちます.

于 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 に答える