AJAXのお勉強

jQuery アニメーション処理＠AJAX

アニメーション処理を行います。

animate({プロパティ:値},速度,ファンクション)です。
プロパティ：top,heigth,width,opacity,などを指定できます。
値：数字、hide、show
速度：slow、normal、fastのどれかを指定。
ファンクション：エフェクト終了後の処理

以下では、divタグに以下のアニメーション処理を行っています。
１．位置を上：100、左：100に移動する。
２．高さと幅を200に変更する。
３．透明度を無くす。
４．透明度を表す。
５．高さと幅を無くしつつ、位置を上：0、左0に移動する。


<html>
<head>
<title>Ajax jQuery animate</title>
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript">
<!--

$(function(){
    $("#dv").animate({ top:100,left:100 },"slow");
    $("#dv").animate({ height:200,width:200 },"slow");
    $("#dv").animate({ opacity:'hide'},"slow");
    $("#dv").animate({ opacity:'show'},"slow");
    $("#dv").animate({ height:'hide',width:'hide',top:0,left:0 },"slow");
});

// -->
</script>
</head>
<body>

<div id="dv"
    style="position:relative;
        padding:5px;
        background:#cccccc;
        border-color:#333333;
        border-width:1px;
        border-style:solid;
        height:1px;
        width:1px;">
</div>
</body>
</html>

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.