为页面添加一个按钮,单击按钮时会以动画的形式显示出一张图片,并且完成时执行函数,实现为图片添加样式边框。再次点击按钮时会以动画的方式隐藏。show()方法和hide()方法使用效果如下:
<head lang="en">
<meta charset="UTF-8">
<title>图片显示与隐藏</title>
<script src="image/jquery-3.3.1.js"></script>
<style>
img{
display: none;
}
</style>
</head>
<body>
<script>
$(function(){
$("#btn").click(function(){
if($(this).val()=="显示"){
$("#pic").show("slow",function(){
$(this).css({"border":"2px solid #ccc","padding":"5px"})
});
$(this).val("隐藏");
}else{
$("#pic").hide("slow");
$(this).val("显示")
}
})
})
</script>
<p><img src="image/pic3.jpg" id="pic"></p>
<input type="button" value="显示" id="btn">
</body>