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

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

対応ブラウザ: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から始まる*/
.animate({ top: 300 });　　　　　/*top 300まで移動*/
});
});

-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;
}