jQuery从入门到熟练(23)
2023-04-24 来源:飞速影视
<style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 200px; height: 200px; top: 50px; left: 10px; background: red; }</style><body><button>慢慢淡出</button><button>慢慢淡入</button><button>淡出/淡入切换</button><div class="div1"></div><script src="js/jquery-1.10.1.js" type="text/javascript"></script><script type="text/javascript"> /* 需求：1. 点击btn1, 慢慢淡出 * 无参 * 有参 * 字符串参数 * 数字参数 2. 点击btn3, 慢慢淡入 3. 点击btn3, 淡出/淡入切换，动画结束时提示“动画结束了” */ var $div1 = $(".div1") $("#btn1").click(function () { // $div1.fadeOut() // $div1.fadeOut("slow") $div1.fadeOut(1000, function () { alert("动画完成了!!!") }) }) $("#btn2").click(function () { $div1.fadeIn() }) $("#btn3").click(function () { $div1.fadeToggle() })</script>
(3) 显示/隐藏动画（不断改变元素的尺寸和透明度来实现）
show()：(不)带动画的显示hide()：(不)带动画的隐藏toggle()：(不)带动画的切换显示/隐藏
<style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 200px; height: 200px; top: 50px; left: 10px; background: red; display: none; }</style><body><button>瞬间显示</button><button>慢慢显示</button><button>慢慢隐藏</button><button>显示隐藏切换</button><div class="div1"></div><script src="js/jquery-1.10.1.js" type="text/javascript"></script><script type="text/javascript"> /* 需求: 1. 点击btn1, 立即显示 2. 点击btn2, 慢慢显示 3. 点击btn3, 慢慢隐藏 4. 点击btn4, 切换显示/隐藏 */ var $div1 = $(".div1") //1. 点击btn1, 立即显示 $("#btn1").click(function () { $div1.show() }) //2. 点击btn2, 慢慢显示 $("#btn2").click(function () { $div1.show(1000) }) //3. 点击btn3, 慢慢隐藏 $("#btn3").click(function () { $div1.hide(1000) }) //4. 点击btn4, 切换显示/隐藏 $("#btn4").click(function () { $div1.toggle(1000) })</script>
相关影视
石榴熟了之一拍到底
2021/大陆/喜剧片从宫本到你
2019/日本/爱情片从民工到明星
2020/大陆/剧情片从爱情到幸福
2022/大陆/国产剧从零到一的爱情
2022/大陆/国产剧入地无门
1996/其它/动作片破门而入
2018/日本/剧情片嫁入豪门
2012/大陆/国产剧
合作伙伴
本站仅为学习交流之用，所有视频和图片均来自互联网收集而来，版权归原创者所有，本网站只提供web页面服务，并不提供资源存储，也不参与录制、上传
若本站收录的节目无意侵犯了贵司版权，请发邮件（我们会在3个工作日内删除侵权内容，谢谢。）
若本站收录的节目无意侵犯了贵司版权，请发邮件（我们会在3个工作日内删除侵权内容，谢谢。）
www.fs94.org-飞速影视 粤ICP备74369512号