CRainyDay

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
//html其余代码同上
$(function() {
$(".head").hover(function() {
$(".content").slideDown(1000);
}, function() {
$(".content").slideUp(1000);
});
});

三.fadeIn()与fadeOut()

这两个方法只会改变元素的透明度

1
2
3
4
5
6
7
8
//html其余代码同上
$(function() {
$(".head").hover(function() {
$(".content").fadeIn();
}, function() {
$(".content").fadeOut();
});
});

四.切换元素的可见性

1.toggle()

直接切换元素可见状态, 不传参数的话, 没有动画的效果.传一个速度参数, 便可看见动画的效果

这个方法相当于show()与hide()方法的组合

1
2
3
4
5
6
//html其余代码同上
$(function() {
$(".head").click(function(){
$(".content").toggle("slow");
});
});

2.slideToggle()

通过高度的变化来切换元素的可见状态

想当于slideDown()与slideUp()方法的组合

1
2
3
4
5
6
//html其余代码同上
$(function() {
$(".head").click(function(){
$(".content").slideToggle("slow");
});
});

3.fadeToggle()

通过透明度来切换元素的可见状态

相当于fadeIn()与fadeOut()方法的组合

1
2
3
4
5
6
//html其余代码同上
$(function() {
$(".head").click(function(){
$(".content").fadeToggle("slow");
});
});

4.fadeTo()

把元素的透明度以渐近的方式调整到指定值(0-1之间)

1
2
3
4
5
6
7
8
9
10
//html其余代码同上
$(function() {
$(".content").show();
var i = 1;
$(".head").click(function(){
//每次点击透明度减少0.2
$(".content").fadeTo("slow",i);
i -= 0.2;
});
});

 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有