创建一个下降的div(适用于IE)

Question

下面是我最初的问题和代码，但根据CoreyRS的评论，让我添加一些细节。我想创建一个div，它拥有页面并消失like a rock falling through the air。问题是它必须在IE 9和8中工作。我发现一些CSS3动画在所有但IE中都很好。如有任何帮助，我们将不胜感激。请提供代码示例。

原始问题和代码

我正在尝试使用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>

我做错了什么，我会接受任何会在屏幕上创建一个渐变div的建议，将在IE 9和8中工作。

Answer 1

尚未测试，但请尝试一下。您需要根据需要编辑宽度/高度属性等，如果您有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>