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

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

今回はjquery.easing.1.3.jsを読み込んでいます。
対応ブラウザ:IE,Firefox,Google Chrome,Safari
参考サイト:http://gihyo.jp/design/serial/01/jsdoit/0004

start

-jQuery-

$(function(){
$("#start").click(function(){
$("#box").css({ top: 0, left: 0 }).stop();
$("#box").animate({ top: 330,left: 600},
{ duration: 1100,specialEasing:{
top: "easeOutBounce",
left: "linear"
}
});
});
});

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