Javascript 页面加载时的淡入效果_Javascript_Jquery_Html_Css

Javascript 页面加载时的淡入效果

javascript jquery html css

Javascript 页面加载时的淡入效果,javascript,jquery,html,css,Javascript,Jquery,Html,Css,如前一个问题（）用户询问如何做的淡入效果我发现这个问题真的很有用，但我还有一些补充。如果你现在访问该网站，你会看到一个淡入，但同时对象的东西像一个下降，我检查了他们的CSS，我发现写在下面的代码框，但我不知道如何应用在我的网站上那么我需要他们特定的JS文件吗？（我不明白/******no js******/…在做什么。）如果你仔细研究了他们网站的代码，你会发现他们正在使用的浏览器功能检测。这样做的目的是根据浏览器的功能在html上加载类在HTML中，它们具有以下内容： <html

如前一个问题（）用户询问如何做的淡入效果

我发现这个问题真的很有用，但我还有一些补充。如果你现在访问该网站，你会看到一个淡入，但同时对象的东西像一个下降，我检查了他们的CSS，我发现写在下面的代码框，但我不知道如何应用在我的网站上

那么我需要他们特定的JS文件吗？（我不明白

/******no js******/…

在做什么。）

如果你仔细研究了他们网站的代码，你会发现他们正在使用的浏览器功能检测。这样做的目的是根据浏览器的功能在

html

上加载类

在HTML中，它们具有以下内容：

<html class="no-js" lang="en">

启用JS后，该类将被剥离并替换为

JS

，它们运行一些脚本来将元素从负的顶部值设置为0。当JS未启用时，

no JS

类将被单独保留，并用作您发布的第二个代码块的CSS挂钩-基本上是将元素从第一个代码块的负顶部值重置回0

这是你问题的最简单解决方案

<!DOCTYPE HTML>
<HTML>
<head>
  <title> Fade In On Page Load </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("#test").fadeIn(5000)
})
</script>
</head>

<body>
  <div id="test>
    <p>This Is A Test</p>
  </div>
</body>
</html>


页面加载时淡入
$（文档）.ready（函数（）{
$（“测试”）.fadeIn（5000）
})
请注意，项目的顶部值为负值。当设置top
属性的动画返回到0时，它们会在项目中淡入淡出，从而实现拖放效果。因此，当不透明度为0时，这些值为负值，但当它们的类具有“.no js”前缀时会重置。这做什么？（没有javascript）？看，他们使用javascript制作元素的动画，如果访问者在浏览器中禁用了它，页面将毫无用处，因为所有内容都是不可见的。他们可能在
上有一个no-js
类，然后被他们制作动画的脚本删除。非常感谢，我要看看他们的脚本和特定的身体元素，然后试试看：把“负边距”改成top，你们有我的投票权。谢谢大家，顺便说一句，我没注意到！现在，你提到了“Modernizer”，他们的脚本也是当你在本地运行页面时，内容是无法查看的，但是如果你将其上传到服务器上，它就像一个魅力XD一样工作，我也想发布这个：D
<!DOCTYPE HTML>
<HTML>
<head>
  <title> Fade In On Page Load </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("#test").fadeIn(5000)
})
</script>
</head>

<body>
  <div id="test>
    <p>This Is A Test</p>
  </div>
</body>
</html>