Javascript 创建一个下降div（在IE中工作）

下面是我的原始问题和代码，但根据CoreyRS的评论，让我补充一些细节。我想创建一个div，它落在页面上，然后消失，就像一块石头从空中掉下来一样。关键是它必须在IE 9和IE 8中工作。我发现一些CSS3动画在除IE之外的所有方面都非常有效。任何帮助都将不胜感激。请提供代码示例

原始问题和代码

我正在尝试使用jQuery中的slideDown动画来设置一个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 );
            });    
        });
    });
});

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

HTML:

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

<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，在IE9和IE8中可以工作

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

#生动活泼{
宽度：100px；
高度：100px；
位置：固定；
顶部：-100px；
左：50%；
左边距：50像素；
z指数：1；
}
var$j=jQuery.noConflict（）；
$j（窗口）.load（函数（）{
$j（“#加载”）.fadeOut（'slow'，function（）{
$j（“#内容包装”）.fadeIn（“慢”，函数（）{
$j（“#animate”）.delay（2000）。animate（{'top'：'50%}，500）；
$j（“#动画”）。延迟（2000）。淡出（500）；
});
});
});

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

#生动活泼{
宽度：100px；
高度：100px；
位置：固定；
顶部：-100px；
左：50%；
左边距：50像素；
z指数：1；
}
var$j=jQuery.noConflict（）；
$j（窗口）.load（函数（）{
$j（“#加载”）.fadeOut（'slow'，function（）{
$j（“#内容包装”）.fadeIn（“慢”，函数（）{
$j（“#animate”）.delay（2000）。animate（{'top'：'50%}，500）；
$j（“#动画”）。延迟（2000）。淡出（500）；
});
});
});

准备一把小提琴，以便其他人可以纠正问题所在。向下翻页和向下滑动功能之间有区别。。。你是想让它自上而下地展现自己，还是像一块石头从空中掉下来一样从页面上掉下来？@CoreyRS-明白了。我在找一块从天而降的石头。我已经找到了使用CSS3实现这一点的方法，但这在IE中不起作用。我需要一个在IE中起作用的解决方案。在jquery中设置css属性的动画应该是可行的。我会修改代码。@CoreyRS-谢谢，非常感谢您对代码的帮助，因为JS不是我的强项。=>准备一把小提琴，以便其他人可以纠正问题所在。向下翻页和向下滑动功能之间有区别。。。你是想让它自上而下地展现自己，还是像一块石头从空中掉下来一样从页面上掉下来？@CoreyRS-明白了。我在找一块从天而降的石头。我已经找到了使用CSS3实现这一点的方法，但这在IE中不起作用。我需要一个在IE中起作用的解决方案。在jquery中设置css属性的动画应该是可行的。我会修改代码。@CoreyRS-谢谢，非常感谢您对代码的帮助，因为JS不是我的强项。=>它只需要一次挂断。

setTimeout

正在快速启动。我想让它等待大约2-3秒。当我改变

500

时，它只改变效果的速度，而不是延迟。如何更改

设置超时

？编辑的代码。试试看，我设置了2秒（2000毫秒）的延迟。当时可能不是IE问题。已编辑的代码，请立即尝试。已删除settimeout并插入延迟。试试看。好吧……好吧……我会直截了当地告诉你……对不起！我的代码中有一个IE条件注释，它超过了你的脚本！我把它拿出来，你的代码就可以正常工作了。我使用setTimeout vs delay。非常感谢你的帮助！！！它只需要一次挂断。

setTimeout

正在快速启动。我想让它等待大约2-3秒。当我改变

500

时，它只改变效果的速度，而不是延迟。如何更改

设置超时

？编辑的代码。试试看，我设置了2秒（2000毫秒）的延迟。当时可能不是IE问题。已编辑的代码，请立即尝试。已删除settimeout并插入延迟。试试看。好吧……好吧……我会直截了当地告诉你……对不起！我的代码中有一个IE条件注释，它超过了你的脚本！我把它拿出来，你的代码就可以正常工作了。我使用setTimeout vs delay。非常感谢你的帮助！！！