0

以下は私の元の質問とコードですが、CoreyRS のコメントに従って詳細を追加させてください。ページを所有して消える div を作成したいと思いますlike a rock falling through the air。問題は、IE 9 および 8 で動作する必要があることです。IE 以外のすべてでうまく動作する CSS3 アニメーションをいくつか見つけました。どんな助けでも大歓迎です。コード例を提供してください。

元の質問とコード

jQuery で slideDown アニメーションを使用して div をアニメーション化しようとしています。アイデアは、div が表示され、ページを下にスライドしてからフェードアウトするというものです。落下中にフェードアウトすることをお勧めしますが、divを落下させることさえできません。これが私のコードです：

JS:

var $j = jQuery.noConflict();
$j(window).load(function() {
    $j('#loading').fadeOut('slow', function() { //fade out loading div
        $j("#content-wrap").fadeIn("slow", function() { // show content div
            setTimeout( function() { // delay slideDown effect
                $j('#animate').slideDown('slow', function() {
                    // script to fade out or hide animate div
                }, 2000 );
            });    
        });
    });
});

HTML:

<div id="loading">
    <h2 class="textcenter">Loading...</h2>
    <img id="loading-image" class="center" src="/images/ajax-loader.gif" />
</div>
<div id="content-wrap" class="hide">
  <div id="animate">
    <img class="fear" src="/sign.png" />
      </div>
    <div class="img-center">
        <img class="feature-image" src="/Prairie-Grass.jpg" />
    </div>
</div>

IE 9および8で機能するフェードアウトする画面上に落下するdivを作成するアドバイスを受け取ります.

4

1 に答える 1

3

テストはしていませんが、試してみてください。必要に応じて幅/高さのプロパティなどを編集する必要があります。cssスタイルシートがある場合は、明らかにインラインスタイルを使用しないでください。

<style>
#animate {
    width:100px;
    height:100px;
    position:fixed;
    top:-100px;
    left:50%;
    margin-left:50px;
    z-index:1;  
}
</style>

<script>
var $j = jQuery.noConflict();
$j(window).load(function() {
    $j('#loading').fadeOut('slow', function() {
        $j("#content-wrap").fadeIn("slow", function() {
            $j('#animate').delay(2000).animate({'top':'50%'}, 500);
            $j('#animate').delay(2000).fadeOut(500);   
        });
    });
});
</script>
于 2012-09-02T06:28:01.450 に答える