我想做的就是在页面加载时淡入我的 Logo 。我今天刚接触 jQuery，无法在加载时淡入，请帮忙。抱歉，如果这个问题已经得到解答，我已经看过并尝试针对不同的问题调整其他答案，但似乎没有任何效果，它开始让我感到沮丧。
谢谢。
代码:
<script type="text/javascript">
$(function () {
.load(function () {
// set the image hidden by default
$('#logo').hide();.fadeIn(3000);
}}
</script>
<link rel="stylesheet" href="challenge.css"/>
<title>Acme Widgets</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<img id="logo" src="logo-smaller.jpg" />
</div>
<div id="nav">
navigation
</div>
<div id="leftCol">
left col
</div>
<div id="rightCol">
<div id="header2">
header 2
</div>
<div id="centreCol">
body text
</div>
<div id="rightCol2">
right col
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
最佳答案
该主题似乎存在不必要的争议。
如果您确实想使用 jQuery 正确解决此问题，请参阅下面的解决方案。
问题是“jQuery 如何让图像在加载时淡入？”
首先，快速说明。
这不是 $(document).ready...的良好候选者...
为什么？因为当 HTML DOM 加载时文档就准备好了。此时 Logo 图像尚未准备好 - 事实上它可能仍在下载!首先要回答一般性问题“jQuery 如何让图像在加载时淡入？” - 此示例中的图像具有 id="logo"属性:
$("#logo").bind("load", function () { $(this).fadeIn(); });
这正是问题所要求的。图像加载后，它将淡入。如果更改图像的来源，则当新来源加载后，它将淡入。
有一条关于与 jQuery 一起使用 window.onload 的评论。这是完全有可能的。有用。可以办到。然而，window.onload 事件需要特别小心。这是因为如果您多次使用它，就会覆盖以前的事件。示例(随意尝试...)。
function SaySomething(words) {
alert(words);
}
window.onload = function () { SaySomething("Hello"); };
window.onload = function () { SaySomething("Everyone"); };
window.onload = function () { SaySomething("Oh!"); };
当然，您的代码中不会有如此接近的三个 onload 事件。您很可能有一个执行 onload 操作的脚本，然后添加 window.onload 处理程序以淡入图像 - “为什么我的幻灯片停止工作!!？” - 因为window.onload问题。
jQuery 的一个伟大功能是，当您使用 jQuery 绑定(bind)事件时，它们都会被添加。
所以你已经知道了 - 该问题已被标记为已回答，但根据所有评论，答案似乎不够充分。我希望这对来自世界各地搜索引擎的任何人都有帮助!
关于jQuery 如何让图像在加载时淡入？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1383870/