JQ动画 

一 概念
1、基本

```
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
```

2、滑动

```
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
```

3、淡入淡出

```
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
```

4、自定义

```
animate(p,[s],[e],[fn])
```
二 代码示范

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button class="b1">隐藏</button>
<button class="b2">显示</button>
<button class="b3">显隐</button>
<button class="b4">slide显隐</button>
<button class="b5">fade显隐</button>
<div class="box"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('.b1').on('click', function () {
$('.box').hide()
})
$('.b2').on('click', function () {
$('.box').show()
})
$('.b3').on('click', function () {
$('.box').toggle()
})
$('.b4').on('click', function () {
$('.box').slideToggle()
})
$('.b5').on('click', function () {
$('.box').fadeToggle(1000, "linear", function () {
console.log("动画完成");
})
// 参数: 时间, 运动曲线, 动画结束后的回调函数
})
</script>
</html>

 
posted @ 2018-10-23 16:18  不沉之月  阅读(114)  评论(0)    收藏  举报