1

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

我在我的网站建设页面上使用了fadeIn事件（我的网站

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

$(document).ready(function(){

$('#logo').fadeIn(3000);
$('#heading').delay(2000).fadeIn(3000);
$('#tagline').delay(1000).fadeIn(3000);

});

虽然我的男朋友每次刷新时都说它在他的 Chrome 浏览器中有效，但在我的浏览器中并不总是有效。有时图像出现，有时不出现。有时它工作得很好，有时却没有。

这可能是我的互联网连接吗？还是我的代码？

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

朱莉安娜

4

2 回答 2

2

Most likely the images aren't done loading or simply don't load in some cases, which causes them to just appear rather than fading in because they were not visible when the fadeIn occurred. To avoid this, make sure they are first loaded by using the window load event.

$(window).load(function(){
  // do stuff
});
于 2012-12-13T22:47:13.047 回答
2

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

您可能想要做的是确保在尝试淡入之前已加载图像。如果在页面完成渲染并且您的 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 秒），除非您想暂停所有动画，直到确定加载图像。

这是一个可以玩的小提琴

于 2012-12-13T22:19:46.957 回答