一、隐藏与显示
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title></title>
<script src=
"jquery-1.10.1.min.js"
></script>
<script src=
"index.js"
></script>
<link type=
"text/css"
rel=
"stylesheet"
href=
"style.css"
/>
</head>
<body>
<!--<p>hello</p>
<button id=
"hide"
>隐藏</button>
<button id=
"show"
>显示</button>
<button id=
"toggle"
>隐藏/显示</button>-->
<script>
for
(
var
i=0;i<5;i++){
$(
"<div>"
).appendTo(document.body);
}
$(
"div"
).click(
function
(){
$(
this
).hide(2000,
function
(){
$(
this
).remove();
});
});
</script>
</body>
</html>
$(document).ready(
function
(){
$(
"#hide"
).click(
function
(){
$(
"p"
).hide(1000);
});
$(
"#show"
).click(
function
(){
$(
"p"
).show(1000);
});
$(
"#toggle"
).click(
function
(){
$(
"p"
).toggle(500);
});
});
div{
background: aqua;
width: 50px;
height: 50px;
margin: 2px;
float: left;
}
|
二、淡入淡出
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title></title>
<script src=
"jquery-1.10.1.min.js"
></script>
<script src=
"fade.js"
></script>
</head>
<body>
<button id=
"in"
>fadeIn</button>
<button id=
"out"
>fadeOut</button>
<button id=
"toggle"
>fadeToggle</button>
<button id=
"to"
>fadeTo</button>
<div id=
"div1"
style=
"width: 80px;display:none;height: 80px; background-color: aqua;"
></div>
<div id=
"div2"
style=
"width: 80px;display:none;height: 80px; background-color: #009B86;"
></div>
<div id=
"div3"
style=
"width: 80px;display:none;height: 80px; background-color: #333333;"
></div>
</body>
</html>
$(document).ready(
function
(){
$(
"#in"
).on(
"click"
,
function
(){
$(
"#div1"
).fadeIn(1000);
$(
"#div2"
).fadeIn(1000);
$(
"#div3"
).fadeIn(1000);
});
$(
"#out"
).on(
"click"
,
function
(){
$(
"#div1"
).fadeOut(1000);
$(
"#div2"
).fadeOut(1000);
$(
"#div3"
).fadeOut(1000);
});
$(
"#toggle"
).on(
"click"
,
function
(){
$(
"#div1"
).fadeToggle(1000);
$(
"#div2"
).fadeToggle(1000);
$(
"#div3"
).fadeToggle(1000);
});
$(
"#to"
).on(
"click"
,
function
(){
$(
"#div1"
).fadeTo(1000,0.5);
$(
"#div2"
).fadeTo(1000,0.7);
$(
"#div3"
).fadeTo(1000,0.3);
});
});
|
本文转自yeleven 51CTO博客，原文链接:http://blog.51cto.com/11317783/1795221
