J Query のアニメーションにトライ

J Query のアニメーションを使ってみました。

アニメーションは、CSSで指定できる装飾を始点と終点で記述し、その2点の位置を補完する形で移動するように見せる機能です。マージンやパディング、トップやレフトなど、2点を数値で指定して、それを始点と終点としてくれます。始点はCSSとして書き、終点をJqueryのanimateのなかで書きます。

書式は、

Object.animate({
CSSのプロパティ:値
},スピード(ミリ秒),function(){次の動作;
});

です。練習で作ってみました。

XHTML

<div id="div1">
<a href="index2.html">
<img src="imgs/clickplease.jpg" width="300" height="124" alt="" />
</a>
</div>

CSS

@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
#div1{
display:block;
position:absolute;
top:0;
left:0;
}
a img{
border:none;
}

Java Script (JQuery)

// JavaScript Document
$(function(){
var div1=$('#div1');
div1.animate({
top:200,
left:1000
},600,function(){div1.animate({
top:400,
left:200
},200)
});
});

▼サンプルはこちら

ふひほ。できたかな…。