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>

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

1 个答案: