JavaScript的衰落内容

在这个网站上我想淡出/动画时，该网站是开放一些东西：http://www.coaching-starnberg.de/neu JavaScript的衰落内容

为了这样做，我用这个片段：

$(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之前隐藏元素的时间很长。这意味着，你看到的一切出现在第二的分裂它隐藏，然后消失了。

如何我减少这种时间间隔，这样就不会首先显示的内容？`

谢谢你们！

来源

2013-09-29 Max

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

相反，您应该使用不依赖于正在加载的文档的非JavaScript解决方案。通常使用的技术是一类“非JS”添加到<html>元素，并在<head>您启动一个脚本，仅仅做到这一点：

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

然后在CSS，你可以设置所有的元素你想要隐形，并为每个只需添加：

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

只要<head>是由浏览器和JavaScript解析启用，“无-JS”级将从html元素被移除。

来源

2013-09-29 13:20:59

感谢您的快速回复Stephan，no-js类的解决方案听起来很甜！我会深入研究这一点，但我想这将解决我所有的问题。 – Max

只要你使用JavaScript，你将永远有延迟。你最初需要用CSS隐藏你的内容。这是因为你依赖于$（document）.ready的逻辑。这意味着浏览器首先加载html，css和所有javascript，然后开始执行你的js代码。通常这些事情应该用CSS完成。

来源

2013-09-29 13:20:26 Krasimir

感谢克拉西米尔，你的回答让我了解问题的根源。 – Max

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

来源

2013-10-01 19:03:01 Max

这也是一个不错的方法。我目前正在研究一个需要no-js警告的网站，并且我正在考虑做同样的事情来增加一点额外的延迟:) –

JavaScript的衰落内容

回答

相关问题