jQuery/JavaScriptを使用してFantasticBouncyEffectを試すことができます

私たちの目標は、4つのボックス(DIV)を持つHTMLページを作成することです。これらの各ボックスをクリックすると、特定の方向にバウンスします。jQueryのメソッドへの引数を使用して、要素のバウンスの方向と速度を制御できます。
HTML
<table>
<tr>
<td><div id="bouncy1">Click here to bounce. Direction: Up</div></td>
<td><div id="bouncy2">Click here to bounce. Direction: Left</div></td>
</tr>
<tr>
<td><div id="bouncy3">Click here to bounce. Direction: Right</div></td>
<td><div id="bouncy4">Click here to bounce. Direction: Down</div></td>
</tr>
</table>
<br/>
<input id="bounceAll" type="button" value="Click to Bounce All!"/>
CSS
div {
padding:5px;
width:150px;
height:100px;
text-align:center;
}
#bouncy1 {
background-color:#FFEE88;
}
#bouncy2 {
background-color:#EE88FF;
}
#bouncy3 {
background-color:#EE8888;
}
#bouncy4 {
background-color:#88EEFF;
}
JavaScript
$(function(){
//Add bounce effect on Click of the DIV
$('#bouncy1').click(function () {
$(this).effect("bounce", { times:5 }, 300);
});
$('#bouncy2').click(function () {
$(this).effect("bounce", { direction:'left', times:5 }, 300);
});
$('#bouncy3').click(function () {
$(this).effect("bounce", { direction:'right', times:5 }, 300);
});
$('#bouncy4').click(function () {
$(this).effect("bounce", { direction:'down', times:5 }, 300);
});
//Bounce all DIVs on click of button
$("#bounceAll").click(function(){
$("div").click();
});
});
JavaScriptの場合
$(document).ready(function(){
$("div").click();
});
JavaScriptで
$(function () {
function bounceDiv(){
$("#six").effect("bounce", { times:3, distance:20 }, 400);
}
setInterval('bounceDiv()', 1000);
});
あなたはsを忘れました'
!:(
ソース: http: //viralpatel.net/blogs/jquery-bounce-effect-bounce-html-js/