js顯示與隱藏動(dòng)畫效果
1,代碼如下
<style type="text/css">
img{
display: none ; /* 圖片默認(rèn)不顯示*/
}
</style>
<body>
<p><img src="./550.png" id="pic"/></p>
<input type="button" value="顯示" id="btn"/>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
if($(this).val() == "顯示"){
$("#pic").show("slow",function(){
$(this).css({"borther":"1px solid #ccc","padding":"5px"});
});
$(this).val("隱藏")
}else{
$("#pic").hide("slow");
$(this).val("顯示");
}
});
});
</script>
</body>
1.運(yùn)行效果：按鈕“顯示”，單擊顯示出隱藏圖片气堕，按鈕變“隱藏”，再次單擊“隱藏”時(shí)圖片消失
shou（）方法與hide（）方法的使用
1.shou（）方法的定義和用法：如果被選元素已被隱藏，則顯示這些元素胚膊，可用參數(shù)duration表示動(dòng)畫效果運(yùn)行時(shí)間眷蜓，如不設(shè)置參數(shù)分瘾，則默認(rèn)為0，即立刻顯示元素
2.hide（）方法的定義和用法：如果被選的元素已被顯示吁系，則隱藏該元素德召。hide方法會(huì)動(dòng)態(tài)的改變當(dāng)前元素的高度白魂、寬度和不透明度，最終隱藏當(dāng)前元素氏捞， 其中參數(shù)的含義與shou（）方法一致碧聪，為頁面添加一個(gè)“顯示”按鈕，單擊“顯示”按鈕液茎，將以動(dòng)畫的方式顯示圖片逞姿，再一次單擊按鈕，圖片以動(dòng)畫效果方式隱藏
