show&hide
左上角的渐变进行显示和隐藏。
参数1：动画秒数
参数2：回调函数，用于动画执行完毕后的反馈操作
注意：当元素隐藏后，是不占据文档流空间位置的。同级排在之后的元素会进行跟进补白
其实底层是设置
display:hidden或移除display属性，并添加一些动画所实现的
<body>
<div style="width: 200px;height: 200px;background-color: red;"></div>
<p><button type="button" style="display: block;">slideUp</button></p>
<p><button type="button" style="display: block;">slideDown</button></p>
</body>
<script src=‘https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js‘></script>
<script>
$(() => {
$("button:first").on("click", function (ev) {
$("div").hide(3000,function () {
$("button:first").text("已隐藏");
});
})
$("button:last").on("click", function (ev) {
$("div").show(3000,function () {
$("button:first").text("hide");
$("button:last").text("已显示");
});
})
})
</script>
slideDown&slideUp
自下而上的渐变进行显示和隐藏。
参数1：动画秒数
参数2：回调函数，用于动画执行完毕后的反馈操作
注意：当元素隐藏后，是不占据文档流空间位置的。同级排在之后的元素会进行跟进补白
其实底层是设置
display:hidden或移除display属性，并添加一些动画所实现的
<body>
<div style="width: 200px;height: 200px;background-color: red;"></div>
<p><button type="button" style="display: block;">slideUp</button></p>
<p><button type="button" style="display: block;">slideDown</button></p>
</body>
<script src=‘https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js‘></script>
<script>
$(() => {
$("button:first").on("click", function (ev) {
$("div").slideUp(3000,function () {
$("button:first").text("已隐藏");
});
})
$("button:last").on("click", function (ev) {
$("div").slideDown(3000,function () {
$("button:first").text("hide");
$("button:last").text("已显示");
});
})
})
</script>
slideToggle
如果已隐藏，就显示，如果已显示，就隐藏。
参数1：动画秒数
参数2：回调函数，用于动画执行完毕后的反馈操作
注意：当元素隐藏后，是不占据文档流空间位置的。同级排在之后的元素会进行跟进补白
其实底层是设置
display:hidden或移除display属性，并添加一些动画所实现的
<body>
<div style="width: 200px;height: 200px;background-color: red;"></div>
<p><button type="button" style="display: block;">slideToggle-已显示</button></p>
</body>
<script src=‘https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js‘></script>
<script>
$(() => {
$("button:first").on("click", function (ev) {
$("div").slideToggle(3000, function () {
if ($("button:first").text().indexOf("已显示") > 1) {
$("button:first").text("slideToggle-已隐藏")
}else{
$("button:first").text("slideToggle-已显示")
}
});
})
})
</script>
fadeIn&fadeOut
原位置单纯的透明度的改变
参数1：动画秒数
参数2：回调函数，用于动画执行完毕后的反馈操作
注意：当元素隐藏后，是不占据文档流空间位置的。同级排在之后的元素会进行跟进补白
其实底层是判断
display是不是hidden，并添加一些动画所实现的
<body>
<div style="width: 200px;height: 200px;background-color: red;"></div>
<p><button type="button" style="display: block;">fadeOut</button></p>
<p><button type="button" style="display: block;">fadeIn</button></p>
</body>
<script src=‘https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js‘></script>
<script>
$(() => {
$("button:first").on("click", function (ev) {
$("div").fadeOut(3000,function () {
$("button:first").text("已隐藏");
});
})
$("button:last").on("click", function (ev) {
$("div").fadeIn(3000,function () {
$("button:first").text("hide");
$("button:last").text("已显示");
});
})
})
</script>
fadeToggle()
如果已隐藏，就显示，如果已显示，就隐藏。
参数1：动画秒数
参数2：回调函数，用于动画执行完毕后的反馈操作
注意：当元素隐藏后，是不占据文档流空间位置的。同级排在之后的元素会进行跟进补白
其实底层是设置
display:hidden或移除display属性，并添加一些动画所实现的
<body>
<div style="width: 200px;height: 200px;background-color: red;"></div>
<p><button type="button" style="display: block;">fadeToggle-已显示</button></p>
</body>
<script src=‘https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js‘></script>
<script>
$(() => {
$("button:first").on("click", function (ev) {
$("div").fadeToggle(3000, function () {
if ($("button:first").text().indexOf("已显示") > 1) {
$("button:first").text("slideToggle-已隐藏")
}else{
$("button:first").text("slideToggle-已显示")
}
});
})
})
</script>
fadeTo()
可指定元素透明度
参数1：动画秒数
参数2：透明度
参数3：回调函数，用于动画执行完毕后的反馈操作
底层其实就是控制
opacity的值实现的
<body>
<div style="width: 200px;height: 200px;background-color: red;"></div>
<p><button type="button" style="display: block;">fadeTo .3</button></p>
</body>
<script src=‘https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js‘></script>
<script>
$(() => {
$("button:first").on("click", function (ev) {
if ($("div").css("opacity") == "0.3") {
$("div").fadeTo(3000, .7, function () {
$("button:first").text("fadeTo .7");
});
} else {
$("div").fadeTo(3000, .3, function () {
$("button:first").text("fadeTo .7");
});
}
})
})
</script>
animate()
可设置自定义动画
参数1：自定义动画的
CSS参数2：执行秒数
参数3：回调函数
以下示例将展示点击按钮后让<div>发生自定义变化。
<body>
<main style="width: 200px;height: 200px;border: 1px solid #ddd;">
<div style="width: 50px;height: 50px;background-color: red;"></div>
</main>
<p><button type="button" style="display: block;">面积改变</button></p>
</body>
<script src=‘https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js‘></script>
<script>
$(() => {
$("button").on("click", function (ev) {
let n1 = Math.floor(Math.random() * (254 + 1));
let n2 = Math.floor(Math.random() * (254 + 1));
let n3 = Math.floor(Math.random() * (254 + 1));
$("div").animate(
{
width: "100%",
height: "100%",
borderWidth: 10
}, 1000);
});
})
</script>