effct

jQueryを使って画像をeffectしてみた。 試してみたのは次の操作である。

・<img>タグを使って画像を追加
・画像のスライドアップ
・画像のスライドダウン
・画像の拡大
・画像のフェードアウト

画像の拡大やフェードアウトはcss3でも可能だが、<img>タグの追加など要素の追加はcssではできそうもないのでjQueryを使った。

ソースコードは次のとおり。

<style type="text/css">
div#eff_ctn  {
         width:680px;
         height:520px;
}
</style>
</HEAD>
<BODY>
<form>
  <input type="button" id="btn" value="開始">
</form>
<br>
<div id="eff_ctn"></div>
<script type="text/javascript">
<!--
$(function(){
  $('#btn').click(function(){
    $('div#eff_ctn').empty();
    $('div#eff_ctn')
     .append('<img id="efect" src="http://www.sample.jp/images/bard.jpg" height="200" width="280">');
    $('img#efect')
     .slideUp(5000)
     .slideDown(5000)
     .animate({width:'660px',height:'500px'},5000)
     .fadeOut(5000);
  });
});
//-->
</script>

サンプル