jQuery中的简单动画
一.hide()与show()
通过hide()与show()方法实现动画, 其中hide()相当于css(“display”,“none”).
以上两个方法不带任何参数时没有任何动画效果, 可以通过添加一个速度参数使元素"动起来". 这两个方法会同时改变内容的高度、宽度、透明度
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
| <head>
<meta charset="UTF-8">
<title>index</title>
<script src="js/jquery-3.4.0.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.panel {
width: 400px;
margin: 0 auto;
}
.head {
width: 400px;
background-color: #bfa;
}
.head:hover {
cursor: pointer;
}
.content {
width: 400px;
background-color: #98C8EF;
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$(".head").hover(function() {
$(".content").show(1000);
}, function() {
$(".content").hide(1000);
});
});
</script>
</head>
<body>
<div class="panel">
<h2 class="head">什么是jQuery?</h2>
<div class="content">
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
</div>
</div>
</body>
|
二.slideDown()与slideUp()
这两个方法只会改变元素的高度, 也可以传一个速度参数
1
2
3
4
5
6
7
8
|
$(function() {
$(".head").hover(function() {
$(".content").slideDown(1000);
}, function() {
$(".content").slideUp(1000);
});
});
|
三.fadeIn()与fadeOut()
这两个方法只会改变元素的透明度
1
2
3
4
5
6
7
8
|
$(function() {
$(".head").hover(function() {
$(".content").fadeIn();
}, function() {
$(".content").fadeOut();
});
});
|
四.切换元素的可见性
1.toggle()
直接切换元素可见状态, 不传参数的话, 没有动画的效果.传一个速度参数, 便可看见动画的效果
这个方法相当于show()与hide()方法的组合
1
2
3
4
5
6
|
$(function() {
$(".head").click(function(){
$(".content").toggle("slow");
});
});
|
2.slideToggle()
通过高度的变化来切换元素的可见状态
想当于slideDown()与slideUp()方法的组合
1
2
3
4
5
6
|
$(function() {
$(".head").click(function(){
$(".content").slideToggle("slow");
});
});
|
3.fadeToggle()
通过透明度来切换元素的可见状态
相当于fadeIn()与fadeOut()方法的组合
1
2
3
4
5
6
|
$(function() {
$(".head").click(function(){
$(".content").fadeToggle("slow");
});
});
|
4.fadeTo()
把元素的透明度以渐近的方式调整到指定值(0-1之间)
1
2
3
4
5
6
7
8
9
10
|
$(function() {
$(".content").show();
var i = 1;
$(".head").click(function(){
$(".content").fadeTo("slow",i);
i -= 0.2;
});
});
|
