1.显示动画
1.1无参数，直接让指定的元素显示出来
$("div").show();
1.2通过控制宽高，透明度，display属性逐渐显示，指定时间现实完毕
$(‘div‘).show(3000);
1.3特定参数类型
$("div").show("slow");
参数:
slow:600ms
normal:400ms
fast:200ms
1.4动画执行完毕，立即执行回调函数
//show(毫秒值，回调函数;
$("div").show(5000,function () {
alert("动画执行完毕！");
});
2.隐藏动画
代码和显示动画类似
$(selector).hide();
$(selector).hide(1000);
$(selector).hide("slow");
$(selector).hide(1000, function(){});
3.开关显示隐藏动画
$(‘#box‘).toggle(3000,function(){});
4.滑入和滑出动画效果
滑入，这里默认值是400ms
$(selector).slideDown(speed, 回调函数);
滑出
$(selector).slideUp(speed, 回调函数);
滑入滑出切换动画效果
$(selector).slideToggle(speed, 回调函数);
5.淡入淡出动画效果
淡入效果
$(selector).fadeIn(speed, callback);
淡出效果
$(selector).fadeOut(1000);
淡入淡出效果
$(selector).fadeToggle(‘fast‘, callback);
6.自定义动画
可以执行一组css属性的自定义动画
$(selector).animate({params}, speed, callback);
- 第一个参数表示：要执行动画的CSS属性（必选）
- 第二个参数表示：执行动画时长（可选）
- 第三个参数表示：动画执行完后，立即执行的回调函数（可选）
7.停止动画
$(selector).stop(true, false);
代码含义
第一个参数： true：后续动画不执行。 false：后续动画会执行。 第二个参数： true：立即执行完成当前动画。 false：立即停止当前动画。
代码演示
自定义动画：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
left: 20px;
top: 30px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script>
jQuery(function () {
$("button").click(function () {
var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
var json2 = {
"width": 100,
"height": 100,
"left": 100,
"top": 100,
"border-radius": 100,
"background-color": "red"
};
//自定义动画
$("div").animate(json, 1000, function () {
$("div").animate(json2, 1000, function () {
alert("动画执行完毕！");
});
});
})
})
</script>
</head>
<body>
<button>自定义动画</button>
<div></div>
</body>
</html>
停止动画效果（很经典的一个案例）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: pink;
}
.wrap li {
background-color: green;
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script>
//入口函数
$(document).ready(function () {
//需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
var jqli = $(".wrap>ul>li");
//绑定事件
jqli.mouseenter(function () {
$(this).children("ul").stop().slideDown(1000);
});
//绑定事件(移开隐藏)
jqli.mouseleave(function () {
$(this).children("ul").stop().slideUp(1000);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
<li><a href="javascript:void(0);">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">二级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
<li><a href="javascript:void(0);">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">三级菜单1</a>
<ul>
<li><a href="javascript:void(0);">三级菜单2</a></li>
<li><a href="javascript:void(0);">三级菜单3</a></li>
<li><a href="javascript:void(0);">三级菜单4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
动画潜入浅出效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="qiehuan">切换</button>
<div class="box">
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// $(‘.box‘).css(‘display‘,‘block‘);
$(‘#show‘).click(function(){
$(‘.box‘).show(3000);
});
});
$(‘#hide‘).click(function(){
$(‘.box‘).hide(3000);
});
$(‘#qiehuan‘).click(function(){
$(‘.box‘).toggle(3000);
})
</script>
</body>
</html>
动画卷帘门效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: green;
display: none;
}
</style>
</head>
<body>
<button id="show">滑入</button>
<button id="hide">滑出</button>
<button id="qiehuan">切换</button>
<div class="box">
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$(‘#show‘).click(function(){
$(‘.box‘).slideDown(1000);
});
$(‘#hide‘).click(function(){
$(‘.box‘).slideUp(1000);
});
$(‘#qiehuan‘).click(function(){
$(‘.box‘).slideToggle(1000);
})
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/LearningOnline/p/9127137.html
时间： 2024-11-05 23:19:30