1

在这个网站上，我想在网站打开时淡化/动画一些东西：http: //www.coaching-starnberg.de/neu

为此，我使用了这个片段：

$(document).ready(function() {
$('img.start').each(function(index) {
if (index == 0) { index = 1; index+=1;}
$(this).animate({opacity: "0.0"}).delay(600*index).animate({opacity: "100.0"}, 9999);
index+=1;
});

元素的 HTML 状态设置为可见，并通过 JavaScript 隐藏。我使用了这个，因为我想让所有东西都可见，浏览器中禁用了 JavaScript。

现在我注意到，JavaScript 隐藏元素之前的时间很长。意思是，您会看到所有内容在隐藏然后淡入之前瞬间出现。

我怎样才能减少这个时间差距，以便内容不首先显示？`

谢谢你们！

4

3 回答 3

2

Stephan Muller 的回答是一个解决方案。

但是出于我的需要，我发现使用 CSS3 Keyframes更容易：

.element { animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}​
于 2013-10-01T19:03:01.773 回答
1

只要你为此使用 JavaScript，你总会有延迟。您最初需要使用 CSS 隐藏您的内容。那是因为你的逻辑依赖于 $(document).ready。这意味着浏览器首先加载 html、css 和所有 javascript，然后开始执行您的 js 代码。一般来说，这些事情应该用 CSS 来完成。

于 2013-09-29T13:20:26.537 回答
1

问题是您默认显示元素，并且只有在加载整个文档后才隐藏它们（并开始褪色）。

相反，您应该使用不依赖于正在加载的文档的无 JavaScript 解决方案。一种常用的技术是向<html>元素添加一个类“no-js”，然后<head>启动一个脚本来执行此操作：

document.getElementsByTagName('html')[0].className = "";

然后在 CSS 中，您可以设置所有您想要不可见的元素，并为每个元素添加：

.no-js [element] {
  visibility: visible;
}

一旦<head>浏览器解析并启用 javascript，'no-js' 类将从 html 元素中删除。

于 2013-09-29T13:20:59.977 回答