0

以下是我最初的问题和代码，但根据 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 的建议，该 div将在 IE 9 和 8 中工作。

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