Question

我是JQuery的新手并尝试了一些基本的事件。

我在构建页面（my website

下的网站上使用了fadeIn事件

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

$(document).ready(function(){

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

});

虽然我的男朋友说他每次刷新时都会在Chrome浏览器中运行，但它并不总能在我的浏览器中运行。有时图像出现，有时它不会。有时它完美无缺，有时则不然。

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

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

娥

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秒）。

Here's a fiddle to play around with

Answer 2

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

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

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

2 个答案: