编辑:
这是我来自 <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>
最佳答案
尝试使用 .fadeIn() 效果。
关于jQuery 动画不会淡入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35300825/