jQuery动画不会淡入答案

【问题标题】：jQuery animation won't fade injQuery动画不会淡入
【发布时间】：2016-05-19 22:56:55
【问题描述】：

编辑：

这是我从<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 中的动画效果让整个 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>

【问题讨论】：

It appears to work 给我。这不是你想要的结果吗？
@Stryner 我可以看到您的 jsfiddle 链接如何显示它正在工作。我很困惑为什么我非常精简的基本版本的代码在我运行它时也不起作用。我正在编辑问题以显示从<html> 到</html> 的完整代码。你能看出我可能错过了什么吗？我不能，我直接从你的代码中复制了元素。
我在您的代码中看到的唯一缺少的东西（默认情况下在小提琴中启用）是您的代码没有在准备好的处理程序中运行。尝试将您的脚本包装在 $(document).ready(function() { /* CODE HERE */ }
好的，这就是问题所在。我想我误解了W3Schools jQuery syntax tutorial 中的最后一个“提示”部分，这似乎是说你可以忽略它。
页面底部的提示说您也可以使用（等效）语法$(function(){ /* CODE HERE */ })，但并没有说要排除它。如果你想排除它，那么<script>标签必须出现在你在html中操作的标签下方。

标签： jquery css jquery-animate

【解决方案1】：

尝试改用.fadeIn() 效果。

How to Fade in element

【讨论】：

也试过了。依然没有。我已编辑问题以包含完整的 <html> 到 </html> 代码。知道为什么这一切都可以在 jsfiddle 中运行，但不能在实际的 Web 服务器上运行吗？我的浏览器检查器显示零错误。