Question

编辑：

以下是我从<html>到</html>

的完整代码

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>   
    <style>
    .product-row
    {
        opacity: 0;
        background-image: url('../img/airplane-background.png');
        background-repeat: no-repeat;
        padding: 50px 0px 100px 0px;
        background-size: cover;
    }
    </style>

    <script>
        $('div.product-row').animate({ opacity: 1 }, { duration: 3000 });
    </script>

    </head> 

    <body>
        <div class="product-row">
            <section>
                <div> 
                    <h1>Products</h1>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>                
                </div>
            </section>
        </div>
    </body>
</html>

即使响应者发布的jsfiddle代码正常工作，它也无法正常工作？

我试图通过在jQuery中使用animate效果来获取整个div，它恰好包含在CSS中定义的背景图像。但是所有这些代码似乎都是通过动画效果使整个div透明而不增加不透明度。

我在这里缺少什么？

<style>
.product-row
{
    opacity: 0;
    background-image: url('../img/airplane-background.png');
    background-repeat: no-repeat;
    padding: 50px 0px 100px 0px;
    background-size: cover;
}
</style>

<script>
    $('div.product-row').animate({ opacity: 1 }, { duration: 3000 });
</script>

<div class="product-row">
    <section>
        <div> 
            <h1>Products</h1>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>                
        </div>
    </section>
</div>

Answer 1

请尝试使用.fadeIn()效果。

How to Fade in element

jQuery动画不会淡入

1 个答案: