<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>this is p</p>
<button type="button" id="btn1">btn1</button>
<button type="button" id="btn2">btn2</button>
<button type="button" id="btn3">btn3</button>
<div id="div1">
this is div1;
</div>
<button type="button" id="btn4">btn4</button>
<button type="button" id="btn5">btn5</button>
<button type="button" id="btn6">btn6</button>
<button type="button" id="btn7">btn7</button>
<button type="button" id="btn8">click here</button>
<div id="div2">
jQuery 滑动方法可使元素上下滑动。
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jQ_function.js"></script>
</body>
</html>
$(document).ready(function(){
$("#btn1").click(function(){
//hide(speed,callback) speed有slow/fast/毫秒
$("p").hide("slow")
});
$("#btn2").click(function(){
$("p").show("fast");
});
//hide和show重复
$("#btn3").click(function(){
$("p").toggle("slow");
});
//淡入淡出
//淡入
$("#btn4").click(function(){
$("div").fadeIn("slow");
});
//淡出
$("#btn5").click(function(){
$("div").fadeOut("slow");
});
//重复
$("#btn6").click(function(){
$("div").fadeToggle("slow");
});
//改变淡出透明度 fadeTo(speed,opacity,callback)
$("#btn7").click(function(){
$("div").fadeTo("slow",0.4);
});
//滑动效果
$("#btn8").click(function(){
//slideUp() slideDown()
$("#div2").slideToggle("fast");
})
});
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix