Jquery 显示隐藏动画
程序员文章站
2022-05-06 08:03:03
...
1 三种方式显示和隐藏
a 默认隐藏和显示
show(speed,[easing],[fn]) //默认显示
speed：动画的速度 easing:用来指定切换的效果 取值swing linner匀速
fn：动画完成时 要执行的函数
hide(speed,[easing],[fn]) //隐藏
toggle(speed,[easing],[fn]);//替换
b 滑动 显示和隐藏
slideDown(speed,[easing],[fn]);
slideUp(speed,[easing],[fn]);
slideToggle(speed,[easing],[fn]);
c: 淡入和淡出 显示方式
fadeIn(speed,[easing],[fn]);
fadeOut(speed,[easing],[fn]);
fadeToggle(speed,[easing],[fn]);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
#showdiv{
text-align: center;
}
</style>
<script type="text/javascript">
function hideFn() {
// 隐藏
//默认隐藏
// $("#showdiv").hide(5000,"linear");
//滑动隐藏
// $("#showdiv").slideUp(3000,"swing");
//淡出
$("#showdiv").fadeOut(3000,"swing");
}
// 显示
function showFn() {
//默认方式
// $("#showdiv").show(5000,"linear");
//滑动显示
// $("#showdiv").slideDown(3000,"swing");
//淡入淡出
$("#showdiv").fadeIn(3000,"swing");
}
//替换效果 显示和隐藏
function toggleFn() {
//默认方式
// $("#showdiv").toggle(3000,"swing");
//滑动显示方式
// $("#showdiv").slideToggle(3000,"swing");
//淡入淡出方式
$("#showdiv").fadeToggle(3000,"swing",[alert("淡出")]);
}
</script>
</head>
<body>
<input type="button" value="点击按钮 隐藏div" onclick="hideFn()"/>
<input type="button" value="点击按钮 显示div" onclick="showFn()"/>
<input type="button" value="点击按钮 显示和隐藏切换" onclick="toggleFn()"/>
<div id="showdiv">
<img width="550px" height="550px" src="img/2.jpg" alt="">
</div>
</body>
</html>
上一篇： 微信小程序第一次开发遇到的坑!
下一篇： Java String 那些事