步骤：
1、导入jQuery相关的文件
2、文档加载完成事件：$(function)：页面初始化的操作：绑定事件，启动页面定时器
3、确定相关操作的事件
4、事件触发函数
5、函数里面再去操作相关的元素
6、显示和隐藏image
（按对角方式显示隐藏）
<!DOCTYPE html>
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="/js/jquery-3.4.1.js"></script>
</head>
<body>
<input type="button" value="显示" id="btn1">
<input type="button" value="隐藏" id="btn2"><br>
<img src="img/1.jpg" id="img1" width="500px">
<script>
$(function() {
//显示页面图片
$("#btn1").click(function() {
$("#img1").show(); //按对角打开
})
//隐藏页面图片
$("#btn2").click(function() {
//获得image
$("#img1").hide(10000); //按对角关闭
});
});
</script>
</body>
</html>
（上下显示隐藏）
<script>
$(function() {
//显示页面图片
$("#btn1").click(function() {
$("#img1").slideDown(); //向下打开
})
//隐藏页面图片
$("#btn2").click(function() {
//获得image
$("#img1").slideUp(500); //向上收起
});
});
</script>
（淡入淡出效果）
<script>
$(function() {
//显示页面图片
$("#btn1").click(function() {
$("#img1").fadeIn(); //淡入淡出效果
})
//隐藏页面图片
$("#btn2").click(function() {
//获得image
$("#img1").fadeOut(1000); //淡入淡出效果
});
});
</script>
（自定义淡入淡出效果）
<script>
$(function() {
//显示页面图片
$("#btn1").click(function() {
$("#img1").animate({ width:"1000px",opacity:"1"},5000);
})
//隐藏页面图片
$("#btn2").click(function() {
$("#img1").animate({ width:"1000px",opacity:"0.2"},5000);
});
});
</script>
1042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
