AJAXのお勉強

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

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

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

以下では、divタグに以下のアニメーション処理を行っています。
1.位置を上:100、左:100に移動する。
2.高さと幅を200に変更する。
3.透明度を無くす。
4.透明度を表す。
5.高さと幅を無くしつつ、位置を上: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.