jQuery 效果 - 淡入淡出的代碼如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(
function()
{
$("#button1").click(
function()
{
$("#div11").fadeIn();
$("#div12").fadeIn("slow");
$("#div13").fadeIn(3000);
}
);
}
);
$(document).ready(
function()
{
$("#button2").click(
function()
{
$("#div21").fadeToggle();
$("#div22").fadeToggle("slow");
$("#div23").fadeToggle(3000);
}
);
}
);
$(document).ready(
function()
{
$("#button3").click(
function()
{
$("#div31").fadeToggle();
$("#div32").fadeToggle("slow");
$("#div33").fadeToggle(3000);
}
);
}
);
</script>
</head>
<body>
<button id="button1" type="button" >點擊一下，圖片出來</button>
<button id="button2" type="button" >點擊一下，圖片進去</button>
<button id="button3" type="button" >點擊一下，圖片出來進去</button>
<p>
<div id="div11" style="width: 80px;height: 80px;display: none;background: red;"></div>
<div id="div12" style="width: 80px;height: 80px;display: none;background: green;"></div>
<div id="div13" style="width: 80px;height: 80px;display: none;background: blue;"></div>
<p>
<div id="div21" style="width: 80px;height: 80px;background: red;"></div>
<div id="div22" style="width: 80px;height: 80px;background: green;"></div>
<div id="div23" style="width: 80px;height: 80px;background: blue;"></div>
<p>
<div id="div31" style="width: 80px;height: 80px;background: red;"></div>
<div id="div32" style="width: 80px;height: 80px;background: green;"></div>
<div id="div33" style="width: 80px;height: 80px;background: blue;"></div>
</body>
</html>