為頁(yè)面添加一個(gè)按鈕见咒,單擊按鈕時(shí)會(huì)以動(dòng)畫(huà)的形式顯示出一張圖片钦铁,并且完成時(shí)執(zhí)行函數(shù),實(shí)現(xiàn)為圖片添加樣式邊框倔既。再次點(diǎn)擊按鈕時(shí)會(huì)以動(dòng)畫(huà)的方式隱藏呢蔫。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>