简单JQuery.fadeIn事件在我的浏览器上无法正常工作

Question

我是JQuery的新手，正在尝试一些基本事件。

我在我的网站建设页面上使用了fadeIn活动(我的网站

我使用的代码如下，仅适用于当前的三个选择器：

$(document).ready(function(){
$('#logo').fadeIn(3000);
$('#heading').delay(2000).fadeIn(3000);
$('#tagline').delay(1000).fadeIn(3000);
});

虽然我男朋友说他每次刷新Chrome浏览器时都能用，但我的浏览器并不总是能用。有时图像会出现，有时不会。有时效果很好，有时效果不好。

这可能是我的网络连接吗？还是我的密码？

我是新来的，所以任何帮助都将不胜感激！！提前谢谢。

Juliana

Answer 1

我会把这个答案保留在这里，但更明显、更容易的非过度杀伤方法可能是@Kevin B在上面的评论中建议的，并使用等待所有页面内容加载的$(window).load()，而不是只等待HTML DOM加载的$(document).ready()。

---

你可能想做的是在尝试淡入之前确保图像已经加载。如果在页面渲染完成并且JS运行时没有加载，它将不会显示。然后，您将刷新浏览器，届时浏览器将正常工作。

试试这个：

$(document).ready(function(){
$("#logo img").bind("load", function () { 
if(!$("#logo").is(":visible")) {
$('#logo').fadeIn(3000);
}
});
$('#logo').fadeIn(3000);
$('#heading').delay(2000).fadeIn(3000);
$('#tagline').delay(1000).fadeIn(3000);
​});

你要做的是首先说，一旦图像加载完成，如果它还没有变为可见，就将其淡入。但问题是，如果图像以前已经下载过，它就永远不会真正启动。所以你需要在它下面有一个正常的fadein()，它总是运行的。

这样做的主要问题是，除非(可能只有<1秒)你想暂停所有动画，直到图像被加载。

这是一把可以摆弄的小提琴

Answer 2

在某些情况下，图像很可能没有加载完成或根本没有加载，这会导致它们只是出现而不是淡入，因为在淡入时它们不可见。要避免这种情况，请确保首先使用窗口加载事件加载它们。

$(window).load(function(){
// do stuff
});