ボタンをクリックした後、そのボタン自身を徐々に透明にし最終的には非表示にする必要があったので、いろいろ調べながら書いてみました。IEは9、10で確認。
<a href="#" id="btn01"><img src="/img/btn_click.png" alt="ボタン" /></a>
リンクとして利用しないのでe.preventDefault();で伝播しないように設定
ボタンをクリックしたら徐々に透明にし、アニメーションが完了したらボタンを非表示にするようにしています。
要素を透明化しただけでは、マウスオーバーが有効になってしまうのでボタンを非表示にしています。
animate終了後の処理はcompleteの後に書くんですね。
$(document).ready(function(){
$('a[href=#]#btn01').click(function(e){
e.preventDefault();
//ボタンをクリックしたときの処理を書く
//↓↓↓ボタンが押されたら徐々に透明化した後非表示にする↓↓↓
$(this).animate({opacity: '0'},{duration: 2000,complete: function(){$(this).css({'display':'none'});}});
})
});
今回は1回きりの処理なのでこれでよいでしょう。たぶん...。