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)
});
});
ふひほ。できたかな…。
2012年1月19日1:28 AM| カテゴリー: Java ScriptとJ Query,見習い奮闘記| コメント (0)