jQueryによるアニメーション基礎2｜Eight-Smile

jQueryによるアニメーション基礎2

対応ブラウザ:IE,Firefox,Google Chrome,Safari
参考サイト:http://gihyo.jp/design/serial/01/jsdoit/0004

start

-jQuery-

$(function(){
$("#start").click(function(){　　　/*startボタンを押したら以下の動作を行う*/
$("#box02").css({ top: 0, width: 100 }).stop()　/*#box02をtop 0の位置にし幅を100pxへ、stop()により落下中にstartを押した時に動作が終ってなくてもtop 0、width 100から始まる*/
.animate({ top: 300, width: 250});　　　　　/*top 300まで移動し幅を250pxへ*/
});
});

-CSS-

#box02{
width: 70px;
height: 70px;
border: 1px solid #333;
background: #369;
position: relative;
top: 0;
filter:alpha(opacity=60);　　/*IE7以下用*/　
-ms-filter: "alpha(opacity=60)";　　/*IE8用*/
opacity: 0.6;
}