jQueryの基本的な関数 animate()
| 目次 |
|---|
|
・jQueryの基本的な関数 animate() ・サンプルソース ・実行例 |
要素を移動させる(アニメーション)
animate()を使うと、要素のstyle属性をアニメーションさせながら変更することができます。
例えば、ある要素の現在の幅が32pxの時、animate()の1つめの引数に、{ width: 128px }と渡せば、32px→128pxに徐々に変化します。
二つめの引数は、アニメーション開始から終了までの時間で、ミリ秒単位で指定します。 省略も可能です。
下のサンプルでは、正方形の辺の長さを32px→128px, 位置を(100px, 100px)→(700px, 500px)に1000ミリ秒かけて移動させています。
サンプルソース
<html>
<head>
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("#block").animate({ width: 128, height: 128, top: 1200, left: 400 },
1000);
});
});
</script>
</head>
<body>
<div id="block" style="background-color: red; width: 32px;
height: 32px; position: absolute; top: 800px; left: 20px;"></div>
<input type="button" id="button" value="move!" />
</body>
</html>
実行例
Information
社長ブログ＆運営サイト
広告
Google Search
カスタム検索
Google乗換検索
PV