<html>
<head>
<script src="js/jquery.js"></script>
<meta charset="utf-8">
<title>动画显示与隐藏</title>
</head>
<body>
<button id="ff">显示</button>
<button id="hide">隐藏</button>
<button id="sw">切换显示</button>
<button id="sd">下滑展示</button>
<button id="sp">收起展示</button>
<button id="sdp">切换下滑与收起</button>
<button id="fdin">淡入</button>
<button id="fdout">淡出</button>
<button id="fdinout">切换淡入淡出</button>
<div id="aa" style="width: 100px;height: 100px;background-color: aqua;display: none;"></div>
</body>
<script>
$(() => {
$("#ff").click(function() {
/*
如果show没有参数 没有动画
1.show参数
第一个参数：执行动画时长 毫秒数 也可以是代表时长字符串 fast normal slow
第二个参数是回调函数
*/
//$("#aa").show(2000) //2s
//$("#aa").show("fast") //200ms
//$("#aa").show("normal") //400ms
//$("#aa").show("slow") //600ms 如果代表时长单词错了默认是normal
$("#aa").show(2000, () => {
alert("动画执行完毕")
})
})
$("#hide").click(function() {
$("#aa").hide(2000,function(){
alert("隐藏完毕")
})
})
$("#sw").click(function() {
$("#aa").toggle(2000,function(){
alert("奇幻完毕")
})
})
$("#sd").click(function(){
$("#aa").slideDown(5000,function(){
alert("展开完毕")
})
})
$("#sp").click(function(){
$("#aa").slideUp(5000,function(){
alert("收起完毕")
})
})
$("#sdp").click(function(){
$("#aa").slideToggle(5000,function(){
alert("切换完毕")
})
})
$("#fdin").click(function(){
$("#aa").fadeIn(5000,function(){
alert("淡入完毕")
})
})
$("#fdout").click(function(){
$("#aa").fadeOut(5000,function(){
alert("淡出完毕")
})
})
$("#fdinout").click(function(){
$("#aa").fadeToggle(5000,function(){
alert("切换淡入淡出")
})
})
})
</script>
</html>
网友评论