アニメーション
ボタンのクリックで不透明度（opacity）を調節する

var opacity=10;   //最初の不透明度(=1)
function photoFadeTo(opct) {       //ボタンがクリックされたら以下を実行
  $('div.photo').fadeTo('normal',opct,function(){
   $('span#label-opacity').text(opct);
  } );
}

$('button#up-opacity').click(function() {  //フェードインがクリックされたら
   if(opacity<10)opacity++;        //より見えるようにする（フェードイン）
   photoFadeTo(opacity/10.0);    //画像の不透明度を変更
} ); 

$('button#down-opacity').click(function() {  //フェードアウトがクリックされたら
   if(opacity>0)opacity--;       //より見えにくくする（フェードアウト）
   photoFadeTo(opacity/10.0);    //画像の不透明度を変更
} );
photoFadeTo(opacity/10.0);       //画像の最初の不透明度を設定

CSSでの設定

div.photo{
margin-top:3px;
}
div.photo img{
border:1px solid #000;
}


実行例
不透明度：
東京駅



変更前のhtml
<div>
  <button id="up-opacity">フェードイン</button>
  <button id="down-opacity">フェードアウト</button>
  不透明度：<span id="label-opacity"></span>
</div>
<div class="photo"><img src="../../../../resources/photo1.jpg" alt="東京駅" /></div>