Coo*_*uke 23 jquery onload fadein
我想做的就是在页面加载时淡化我的徽标.我今天是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>
Fen*_*ton 49
这个话题似乎不必要地引起争议.
如果你真的想用jQuery正确解决这个问题,请参阅下面的解决方案.
问题是"jQuery如何让图像在加载时淡入？"
首先,快速说明.
这不是$(document).ready的好候选人.
为什么？因为在加载HTML DOM时文档已准备就绪.此时徽标图像还没有准备好 - 实际上它可能仍在下载!
所以首先回答一般问题"jQuery如何让图像在加载时淡入？" - 此示例中的图像具有id ="logo"属性:
$("#logo").bind("load", function () { $(this).fadeIn(); });
这正是问题所要求的.加载图像后,它将淡入.如果更改图像的来源,当新源加载时,它将淡入.
有关于使用window.onload和jQuery的评论.这是完全可能的.有用.可以办到.但是,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绑定事件时,它们都会被添加.
所以你有它 - 问题已被标记为已回答,但根据所有评论,答案似乎不够.我希望这可以帮助任何来自世界搜索引擎的人!
Tra*_*Guy 19
第5行有语法错误:
$('#logo').hide();.fadeIn(3000);
应该:
$('#logo').hide().fadeIn(3000);
kar*_*m79 10
只需将徽标的样式设置为display:hidden并调用fadeIn,而不是先调用hide:
$(document).ready(function() {
$('#logo').fadeIn("normal");
});
<img src="logo.jpg" style="display:none"/>
要使用多个图像执行此操作,您需要通过.each()函数运行.这有效,但我不确定它的效率如何.
$('img').hide();
$('img').each( function(){
$(this).on('load', function () {
$(this).fadeIn();
});
});
小智 5
使用 Sohnee 和 karim79 的示例。我对此进行了测试，它在 FF3.6 和 IE6 中都有效。
<script type="text/javascript">
$(document).ready(function(){
$("#logo").bind("load", function () { $(this).fadeIn('slow'); });
});
</script>
<img src="http://www.gimp.org/tutorials/Lite_Quickies/quintet_hst_big.jpg" id="logo" style="display:none"/>
Coo*_*uke -3
我找到答案了！您需要使用 window.onload 函数，如下所示。感谢技术人员和卡里姆的帮助。注意：您还需要使用文档准备功能。
window.onload = function() {$('#logo').hide().fadeIn(3000);};
$(function() {$("#div").load(function() {$('#div').hide().fadeIn(750););
当放在图像后面时它也对我有用......谢谢
| 归档时间： |
|
| 查看次数： |
131387 次 |
| 最近记录： |