Jquery动画三种方式操作显示或隐藏
程序员文章站
2022-05-06 08:02:21
...
Jquery动画三种方式操作显示或隐藏
先说一下通用参数
speed:表示动画的速度
三个预定义的值(“slow”,“normal”,"fast)或直接传毫秒值(如:1000);
easing:表示指定切换的效果
swing:(默认值)表示动画执行速度,先慢中快后慢,起步加速减速
linear:动画执行速度为匀速状态
function:在动画执行完会执行的函数,每个元素执行一次
-
默认方式
show(speed,easing,function)
hide(speed,easing,function)
toggle(speed,easing,function)
-
滑动显示与隐藏效果
slideDown(speed,easing,function)
slideUp(speed,easing,function)
slideToggle(speed,easing,function)
-
淡入淡出显示与隐藏
fadeIn(speed,easing,function)
fadeOut(speed,easing,function)
fadeToggle(speed,easing,function)
代码演练
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
//点击按钮隐藏div
function hideFn(){
//默认效果
// $("#showDiv").hide("slow","swing");
//滑动
// $("#showDiv").slideUp("fast");
//淡入淡出
$("#showDiv").fadeOut("slow");
}
//点击按钮显示div
function showFn(){
//默认效果
// $("#showDiv").show("normal","linear",function(){
// // alert("显示完毕");
// });
//滑动
// $("#showDiv").slideDown("slow");
//淡入淡出
$("#showDiv").fadeIn("normal");
}
//点击按钮切换div显示和隐藏
function toggleFn(){
//默认效果
// $("#showDiv").toggle("fast",function(){
// console.log("改变了");
// })
//滑动
// $("#showDiv").slideToggle("normal");
//淡入淡出
$("#showDiv").fadeToggle(5000,"swing");
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:pink">
div显示和隐藏
</div>
</body>
</html>
下一篇: html_div显示与隐藏相关内容