一、显示与隐藏
show() 显示
hide() 隐藏
toggle() 显示或隐藏
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画</title>
<style>
section{
width: 100px;
height: 100px;
background-color: gold;
}
</style>
</head>
<body>
<button>点我</button>
<section></section>
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$("button").click(function(){
$("section").hide();
})
</script>
</html>
此时点击按钮,方块消失,但是再次点击,方块依旧不会出现,如果使用toggle则再次点击方块会出现:
<script>
$("button").click(function(){
$("section").toggle(300);//300毫秒
})
</script>
效果:显示隐藏-CSDN直播jquery动画一显示与隐藏https://live.csdn.net/v/214167
二、展开或收起
slideUp() 向上收起
slideDown() 向下展开
slideToggle() 展开或收起
示例:
<script>
$("button").click(function(){
$("section").slideToggle(300);//300毫秒
})
</script>
效果:
展开或收起-CSDN直播JQ动画展开或收起https://live.csdn.net/v/214168
三、淡入与淡出
fadeIn() 淡入
fadeOut() 淡出
fadeTo() 渐变到一定程度
fadeToggle() 淡入或淡出
<script>
$("button").click(function () {
$("section").fadeToggle(300, function () {
// 动画执行结束后,执行这个方法
alert("动画结束了");
});//300毫秒
})
</script>
效果:
淡入与淡出-CSDN直播Jquery动画淡入与淡出https://live.csdn.net/v/214174
四、任意动画
第一种方法:回调
示例:
<script>
$("button").click(function () {
$("section").animate({
width:200
},300,function(){
$("section").animate({
height:200
},300)
})
})
</script>
第二种方法:
示例:
<script>
$("button").click(function () {
$("section").animate({ width: 200 }, 300)
.animate({ height: 200 }, 300);
})
</script>
效果: