jQuery fadeIn() 用于淡入已隐藏的元素。
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
html代码
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8" />
-
<title></title>
-
<link rel="stylesheet" type="text/css" href="css/1.css"/>
-
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
-
<script type="text/javascript" src="js/1.js"></script>
-
</head>
-
<body>
-
<button>Click Me box hidden</button>
-
<div id="box1"></div>
-
<div id="box2"></div>
-
<div id="box3"></div>
-
</body>
-
</html>
2css代码：
-
*{
-
margin: 0;
-
padding: 0;
-
}
-
#box1{
-
width: 100px;
-
height: 100px;
-
background: red;
-
display: none;
-
}
-
#box2{
-
width: 100px;
-
height: 100px;
-
background: greenyellow;
-
display: none;
-
}
-
#box3{
-
width: 100px;
-
height: 100px;
-
background: deepskyblue;
-
display: none;
-
}
3 js jq代码：
-
window.onload = function(){
-
-
-
$(function(){
-
-
-
$("button").click(function(){
-
-
$("#box1").fadeIn(5000); //毫秒
-
$("#box2").fadeIn("slow"); //缓慢
-
$("#box3").fadeIn("faset"); //快速
-
-
})
-
-
-
-
-
-
})
-
-
-
-
-
-
-
}
阅读(673) | 评论(0) | 转发(0) |
