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()
{
$(".button1").animate({left:'500px'});
}
);
}
);
$(document).ready(
function(){
$("#button2").click(
function()
{
$(".button2").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
}
);
}
);
$(document).ready(
function(){
$("#button3").click(
function()
{
$(".button3").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
}
);
}
);
$(document).ready(
function(){
$("#button4").click(
function()
{
$(".button4").animate({
height:'toggle'
});
}
);
}
);
$(document).ready(
function(){
$("#button5").click(
function()
{
var div= $(".button5");
div.animate({height:'300px',opcity:'0.4'},"slow");
div.animate({width:'300px',opcity:'0.8'},"slow");
div.animate({height:'100px',opcity:'0.4'},"slow");
div.animate({width:'100px',opcity:'0.8'},"slow");
}
);
}
);
$(document).ready(
function(){
$("#button6").click(
function()
{
var div= $(".button6");
div.animate({ left:'250px'},"slow");
div.animate({ fontSize:'3em'},"slow");
}
);
}
);
</script>
</head>
<body>
<button id="button1" >開始動畫=移動</button> <button id="button2" >開始動畫=多個屬性變大</button> <button id="button3" >開始動畫=多個屬性變大</button>
<button id="button4" >開始動畫=伸縮</button> <button id="button5" >開始動畫=擴散</button> <button id="button6" >開始動畫=移動且字體變大</button>
<p>默認情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute。</p>
<div class="button1" style="background: #98bf21;height:100px;width: 100px;position: absolute;" >
</div>
<p><p><p><p><p><hr>
<div class="button2" style="background:red;height:100px;width:100px;position:absolute;">
</div>
<p><p><p><p><p><hr>
<div class="button3" style="background:blue;height:100px;width:100px;position:absolute;">
</div>
<p><p><p><p><p><hr>
<div class="button4" style="background:gray;height:100px;width:100px;position:absolute;">
</div>
<p><p><p><p><p><hr>
<div class="button5" style="background:green;height:100px;width:100px;position:absolute;">
</div>
<p><p><p><p><p><hr>
<div class="button6" style="background:navy;height:100px;width:100px;position:absolute;">hello
</div>
</body>
</html>
