<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("div").click(function(){
if($(this).hasClass("red")){
$(this)
.animate({left:120})
.animate({left:240})
.animate({left:0})
.animate({left:240})
.animate({left:120});
}
})
});
</script>
<style type="text/css">
div{
position: absolute;
width: 100px;
height: 100px;
}
.blue{
left: 0px;
background: blue;
}
.red{
left: 120px;
background: red;
z-index: 1;
}
.green{
left: 240px;
background: green;
}
.pos{
top: 120px;
}
</style>
</head>
<body>
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="red pos"></div>
</body>
</html>運行結果：
