Question

在这个网站上，我想在网站开放时淡化/动画一些东西：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隐藏元素之前的时间很长。意思是，你看到一切都隐藏在隐藏之前的一瞬间出现，然后逐渐消失。

我如何缩短这个时间间隔，以便不首先显示内容？`

谢谢你们！

Answer 1

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

但是根据我的需要，我发现使用CSS3 关键帧更容易：

.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;
    }
}

Answer 2

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

Answer 3

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

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

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

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

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

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

JavaScript褪色内容

3 个答案: