ブログ練習帳J Query のアニメーションにトライ

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)