圖片收起與展開的動畫效果(顯示隱藏動畫效果)

jQuery用到的方法:
show():如果被選元素已被隱藏,則顯示這些元素。
注意:該效果適用於通過 jQuery 隱藏的元素,或在 CSS 中聲明 display:none 的元素(但不適用於 visibility:hidden 的元素)。
hide():如果被選的元素已被顯示,則隱藏該元素。
注意:我們用到了jQuery的show()和hide()方法需要引入jQuery相關的js。(如下圖引入那個都可以)
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery01</title>
<style type="text/css">
	div{
		height:200px;
		width:300px;
		margin-top:10px;
		margin-bottom: 10px;
		background-image:  url(/3DT/img/jb.png);
		display: none; 
	}

</style>

<script type="text/javascript" src="/3DT/js/jquery-2.1.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){	 
		  $("#but1").click(function(){
			 $("div").show(2000);		  
		  })
		  
		  $("#but2").click(function(){
			  //$("div").text("內容是:8888");	
			  $("div").hide(2000);
		  })
	 
	});

</script>
</head>
<body>
<input type="button" value="圖片顯示" id="but1">
<input type="button" value="圖片收起" id="but2">

<div></div>
<div></div>
<div></div>
</body>
</html>

效果圖:

點擊“圖片顯示”

點擊"圖片收起"

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章