如何使用 jQuery 在加载时缓慢淡出图像答案

【问题标题】：How to slowly FadeOut an image ON LOAD using jQuery如何使用 jQuery 在加载时缓慢淡出图像
【发布时间】：2012-01-02 18:14:20
【问题描述】：

我想让图像在加载时慢慢淡出。想法是我的名字，你点击进入我的网站，在我的主页上短暂停留，就像我的介绍页面的视觉回声。

我确定这是一个告密者，但我是编码新手，所以我很挣扎。

我发现我需要有 css visibility:hidden; （不确定我是否需要将其放入 jquery 或实际的 css 中，或两者兼而有之），因为我希望页面上的其他元素在图像完全消失时不会跳转。

NB 已将 jsfiddle 中的文本替换为图像

【问题讨论】：

【解决方案1】：

试试这个：

$(document).ready(function(){     
    $('#namefade').fadeOut(5000);

});

【讨论】：

【解决方案2】：

试试下面的

$(document).ready(function(){     
    $('#namefade').fadeOut('slow', function() { $(this).css({visibility: 'hidden', opacity: 0})});
});

你所拥有的变化：

.fadeOut() 函数接受一个可选的第二个参数，如果已定义并且是一个函数，它将在每个已完成淡出的项目的上下文中调用。 jQuery 的所有动画函数都是如此。

【讨论】：

谢谢！我只是在了解技术术语，所以不是 100% 理解它是如何工作的。我的 jquery 文件开头有 $(document).ready() （这是我所有网站 jquery 的一个文件~当然除了插件文件和库文件之外）。我认为函数 .load 意味着 jquery 可以在负载上工作。你是说它矫枉过正吗？
我会试试你的建议
jQuery 将调用您在$(document).ready() 中定义的函数，以响应它检测到 DOM 已完全加载并准备好进行交互。

【解决方案3】：

你需要做这样的事情。

我正在包装我在 div 内淡出的内容。然后，我将该 div 的高度设置为您的图像大小的高度。

让你知道：

【讨论】：

哇是的！赛斯，非常感谢！淡出一种享受，但其他元素正在跳跃。我仍然不确定我在哪里隐藏了可见性或不显示任何东西，对不起！
仍然有文本跳跃，现在我意识到，我的介绍页面图像（我的名字 gif）与我的主页淡出不同步。与包含 div 有关系吗？介绍页面没有包含 div，因为我希望我的名字图像始终是相对的，在中间，与浏览器窗口大小调整有关）。
对图像进行了排序。 z-index 设置问题。现在有另一个问题，所以会重新发布。