jQuery 、jQuery UI の Effectプラグイン を使用して、特殊効果を発生させます。
ボックスをクリックすると、さまざまな特殊効果が発生します。

対象プラグインを、下記より入手してください。
* jQuery
* jQuery UI

サンプル

サンプルソース

JavaScript + CSS

<link rel="stylesheet" type="text/css" href="http://www.strollnet.com/js/jquery/css/black-tie/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/ui.core.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/ui.effect.core.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/ui.effect.all.js"></script>

<script type="text/javascript">
<!--
   $(function() {
      $(".toggler").click(function() {
         $("#effect").effect('bounce'); // Effect名
      });
   });
//-->
</script>

<style type="text/css">
   .toggler { float:left; width: 240px; height: 135px; margin: 10px; }
   #effect { padding: 0.4em; }
</style>

HTML

<div class="toggler">
   <div id="effect" class="ui-widget-content ui-corner-all">
      <h3 class="ui-widget-header ui-corner-all">タイトル</h3>
      <p>本文</p>
   </div>
</div>