本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。
この記事は最終更新から2年以上経過しています。
ボタンをクリックした後、そのボタン自身を徐々に透明にし最終的には非表示にする必要があったので、いろいろ調べながら書いてみました。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回きりの処理なのでこれでよいでしょう。たぶん...。