Question

使用header代码window提供的fadeIn完全加载后，如何淡化jQuery的所有元素？

相关代码：

HTML

<div class="banner">
 <header class="header">
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
    <i class="fa fa-bars"></i>
</header>

Answer 1

尝试在.fadeIn()的{{1}}事件中调用widow对具有类标题的元素（不需要抓取其中的所有元素），

load

假如你想确定fadeIn内部元素，那么你必须把它写成

$(window).load(function(){
 $(".header").hide().fadeIn("slow");
});

Answer 2

以下是在DOM完全加载后运行函数的方法：

＆＃13;

$(function(){
  // Code here  
});

＆＃13;

您可以使用.fadeIn淡化元素，然后使用$("header").children()选择标题中的所有项目。

所以你的完整代码如下：

＆＃13;

$(function(){
  $("header").children().fadeIn();  
});

＆＃13;

如果您希望元素开始＆＃34;隐藏＆＃34;然后淡出使用：

＆＃13;

$("header").children().hide();
$(function(){
  $("header").children().fadeIn();
});

＆＃13;

Answer 3

您可以在＆＃34; opacity＆＃34;上使用CSS转换属性。优点是您可以设置长度（以秒为单位），样式（缓动，缓入，缓出，线性，立方贝塞尔（n，n，n，n））和延迟（以秒为单位）效果。示例：transition: opacity 2s linear 1s;

＆＃13;

function show(){
document.getElementById("header").style.opacity = "1"; 
}

＆＃13;

#header {
opacity: 0;
background: gold;
-webkit-transition: opacity 3s; /* Safari */
transition: opacity 3s;
}

＆＃13;

<body onload="show()">
 <header id=header>
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
    <i class="fa fa-bars"></i>
</header>
</body>

＆＃13;

如何淡化标题中的所有元素？

3 个答案: