jQuery显示和隐藏动画、滑动动画
2022-03-12 本文已影响0人
马佳乐
显示/隐藏
显示 show([speed,callback]);
- 可选参数1：代表执行动画的时长，毫秒数，也可以是代表时长的字符串：fast(200毫秒)、 normal(400毫秒)、 slow(600毫秒)
如果字符串内容写错了，则按normal执行显示
如果show()这个方法没有参数,那就没有动画效果 - 可选参数2：代表动画执行完毕后的回调函数
隐藏 hide([speed,callback]);
使用方法同上
切换 toggle([speed,callback]);
如果元素是隐藏状态就动画显示,如果元素是显示状态就动画隐藏
使用方法同上
代码练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示" id="show" />
<input type="button" value="隐藏" id="hide" />
<input type="button" value="切换" id="toggle" />
<br />
<div id="div1"></div>
</body>
</html>
<script src="js/jquery.js"></script>
<script>
$(function() {
//显示
$("#show").click(function() {
$("#div1").show();
//$("#div1").show(2000);
//$("#div1").show("fast");
//$("#div1").show("normal");
//$("#div1").show("slow");
//$("#div1").show("123");
// $("#div1").show(1000, function() {
// alert("动画执行完毕");
// });
});
//隐藏
$("#hide").click(function() {
//$("#div1").hide();
//$("#div1").hide(1000);
//$("#div1").hide("fast");
//$("#div1").hide("normal");
//$("#div1").hide("slow");
// $("#div1").hide(1000, function() {
// alert("动画执行完毕");
// });
});
//切换
$("#toggle").click(function(){
//$("#div1").toggle();
//$("#div1").toggle(1000);
//$("#div1").toggle("fast");
//$("#div1").toggle("normal");
//$("#div1").toggle("slow");
$("#div1").toggle(1000, function() {
alert("动画执行完毕");
});
});
});
</script>
滑动
滑入 slideDown([speed,callback]);
向下滑动元素
使用方法同上。除了slideDown();默认是含"normal"的400毫秒的速度。
滑出 slideUp([speed,callback]);
向上滑动元素
使用方法同上。
切换 slideToggle([speed,callback]);
元素是隐藏状态就滑入，元素是显示状态就滑出
使用方法同上。
代码练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<input type="button" value="滑入" id="slideDown" />
<input type="button" value="滑出" id="slideUp" />
<input type="button" value="切换" id="slideToggle" />
<br />
<div id="div1"></div>
</body>
</html>
<script src="js/jquery.js"></script>
<script>
$(function() {
//滑入
$("#slideDown").click(function() {
$("#div1").slideDown();
//$("#div1").slideDown(2000);
//$("#div1").slideDown("fast");
//$("#div1").slideDown("normal");
//$("#div1").slideDown("slow");
//$("#div1").slideDown("123");
// $("#div1").slideDown(1000, function() {
// alert("动画滑动执行完毕");
// });
});
//滑出
$("#slideUp").click(function() {
$("#div1").slideUp();
//$("#div1").slideUp(1000);
//$("#div1").slideUp("fast");
//$("#div1").slideUp("normal");
//$("#div1").slideUp("slow");
// $("#div1").slideUp(1000, function() {
// alert("动画滑动执行完毕");
// });
});
//切换
$("#slideToggle").click(function(){
//$("#div1").slideToggle();
//$("#div1").slideToggle(1000);
//$("#div1").slideToggle("fast");
//$("#div1").slideToggle("normal");
//$("#div1").slideToggle("slow");
$("#div1").slideToggle(1000, function() {
alert("动画滑动执行完毕");
});
});
});
</script>
