创建一个下降的div(可在IE中使用) [英] Create a falling div (that works in IE)

问题描述

下面是我的原始问题和代码，但根据CoreyRS的评论，我可以添加一些细节.我想创建一个属于该页面并消失like a rock falling through the air的div.问题在于它必须在IE 9和8中都能正常工作.我发现一些CSS3动画在所有 but IE中都可以正常工作.任何帮助表示赞赏.请提供代码示例.

Below is my original question and code but per CoreyRS's comment let me add some detail. I want to create a div that falls own the page and disappears like a rock falling through the air. The catch is it must work in IE 9 and 8. I have found some CSS3 animations that work great in all but IE. Any help is appreciated. Please provide code examples.

原始问题和代码

我正在尝试使用jQuery中的slideDown动画为div设置动画.这个想法是一个div将显示，然后向下滑动页面，然后淡出.最好是它在掉落时会淡出，但我什至无法使div掉落.这是我的代码:

I am attempting to use the slideDown animation in jQuery to animate a div. The idea is a div will show then slide down the page and then fade out. Preferably it would fade out while falling but I cannot even get the div to fall. Here is my code:

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中工作.

What am I doing wrong and I will take any advice that will create a falling div on the screen that fades out that will work in IE 9 and 8.

推荐答案

尚未测试，但可以尝试一下.您需要根据需要编辑width/height属性等，并且如果您具有CSS样式表，显然不要使用内联样式.

Haven't tested but give this a go. You'll need to edit the width/height properties etc to your needs, and obviously don't use inline styling if you have a css stylesheet.

<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中使用)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！