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

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

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

start

-jQuery-

$(function(){
$("#start").click(function(){　　　/*startボタンを押したら以下の動作を行う*/
$("#box").css("top", 0).stop();　/*#boxをtop 0の位置へ、stop()により落下中にstartを押した時に動作が終ってなくてもtop 0から始まる*/
$("#box").animate({ top: 300 }, null, null, function(){　/*top 300に到達しアニメーションが終了したら以下の処理を行う*/
alert("アニメーションが終了しました。");
});
});
});

-CSS-

#box{
width: 70px;
height: 70px;
background: #369;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
position: relative;
top: 0;
filter:alpha(opacity=60); /*IE7以下用*/　
-ms-filter: "alpha(opacity=60)"; /*IE8用*/
opacity: 0.6;
}