如何使用jQuery慢慢FadeOut图像ON LOAD

我想在载荷时慢慢淡出图像。 想法是，我点击进入我的网站的名称会暂时保留在我的主页上，就像我的介绍页面中的视觉回声一样。

我确定它是一个小故障，但我是编码的新手，所以我很挣扎。

我已经收集到了我需要拥有css可见性：隐藏; （不确定我是否需要将它放在jquery或实际的css中，或者两者兼而有之），因为我希望页面上的其他元素在图像完全消失时不会跳转。

NB已经替换了jsfiddle中的文本图像

http://jsfiddle.net/cress/BdHmG/1/

Answer 1

试试这个：

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

http://jsfiddle.net/BdHmG/7/

Answer 2

请尝试以下方法

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

你所拥有的变化：

• 使用$(document).ready()而不是$(window).load()
• 改变css之前的淡出
• 在动画结尾的回调中改变css，而不是马上

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

Answer 3

你需要做这样的事情。

http://jsfiddle.net/BdHmG/4/

我正在将我的内容包装在div中逐渐消失。 然后我将该div的高度设置为图像大小的高度。

你知道吗：

• visibility:hidden将隐藏元素但保持其形状
• display:none将隐藏元素并折叠其形状