基本动画
-
$('div').show();无参数，表示让指定的元素直接显示出来。 -
$('div').show(3000);通过控制元素的宽高、透明度、display属性逐渐显示。 -
$('div').show("slow");和方式二一样。参数可以是slow,normal,fast。 -
#('div').show(5000, function(){alert("动画执行完毕");});动画执行完毕立即执行回调函数
上述时间控制都是毫秒为单位的。
显示动画：show()
隐藏动画：hide()
开关式显示隐藏动画：toggle()
三者的参数设置都是一样的。
关闭动画：stop()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<style>
.box{
width:200px;
height:200px;
background-color:red;
display:none;
}
</style>
</head>
<body>
<button id="show">显示动画</button>
<button id="hide">隐藏动画</button>
<button id="toggle">开关式动画</button>
<div class="box"></div>
<script>
$(function(){
$('#show').click(function(){
// $('.box').show();
$('.box').show(3000);
});
$('#hide').click(function(){
// 默认 normal 400ms; slow 600ms; fast 200ms;
$('.box').hide('slow');
});
// 开关式显示隐藏动画
$('#toggle').click(function(){
// 玩动画就和玩定时器一样， 先关动画再开动画。
$('.box').stop().toggle(2000);
})
})
</script>
</body>
</html>
卷帘门动画
也叫滑入滑出动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<style>
.box{
width:200px;
height:200px;
background-color:red;
display:none;
}
</style>
</head>
<body>
<button id="slideDown">滑入</button>
<button id="slidUp">滑出</button>
<button id="toggleSlide">开关式动画</button>
<div class="box"></div>
<script>
$(function(){
$('#slideDown').click(function(){
// 使用方法和show hide一模一样，就是方法名不一样
$('.box').slideDown(3000);
});
$('#slidUp').click(function(){
// 默认 normal 400ms; slow 600ms; fast 200ms;
$('.box').slideUp('slow');
});
// 开关式显示隐藏动画
$('#toggleSlide').click(function(){
$('.box').stop().slideToggle(2000);
})
})
</script>
</body>
</html>
淡入淡出动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<style>
.box{
width:200px;
height:200px;
background-color:red;
display:none;
}
</style>
</head>
<body>
<button id="fadeIn">淡入</button>
<button id="fadeOut">淡出</button>
<button id="fadeToggle">开关式动画</button>
<div class="box"></div>
<script>
$(function(){
$('#fadeIn').click(function(){
// 使用方法和show hide一模一样，就是方法名不一样
$('.box').fadeIn(3000);
});
$('#fadeOut').click(function(){
// 默认 normal 400ms; slow 600ms; fast 200ms;
$('.box').fadeOut('slow');
});
// 开关式显示隐藏动画
$('#fadeToggle').click(function(){
$('.box').stop().fadeToggle(2000);
})
})
</script>
</body>
</html>
自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<style>
.box{
width:100px;
height:100px;
background-color:red;
position:absolute;
bottom:0;
left:0;
}
</style>
</head>
<body>
<div class="box"></div>
<button>动画</button>
<script>
$(function(){
$('button').click(function(){
// animate(队列的属性,时间,回调函数)
var json= {
width:"500",
height:"500",
top:10,
left:1000,
"border-radius":200,
}
var json2 = {
width:0,
height:0,
top:10,
left:1000,
}
// 放入的队列值，表示从多少时间内，这些值由原来的变成队列中的值，来达成动画效果。
$('.box').stop().animate(json, 1000, function(){
$('.box').stop().animate(json2, 1000, function(){
alert('已添加购物车')
})
});
});
})
</script>
</body>
</html>