javascript - jQuery を使用したモジュラー AJAX 読み込みインジケーター

Question

多くの AJAX リクエストを含むページの読み込みイメージを表示しようとしています (そして親を透明にします)。各divの読み込みアイコンと不透明度を個別に追加/削除する最も効率的な方法は何ですか?

これが私がこれまでに持っているものです。私のアプローチの問題は、不透明度がgifにも適用されることです。これは私が望むものではありません。私のコードを簡単に修正したり、これに対するより良いアプローチはありますか?

例: http://jsfiddle.net/justincook/x4C2t/

HTML:

<div id="a" class="box">A</div>
<div id="b" class="box">B</div>
<div id="c" class="box">C</div>

JavaScript:

$.fn.loading = function(show){
    if(show){
        this.prepend('<div class="loading-centered"></div>');
        this.css({ opacity: 0.3 });
    }else{
        this.children('.loading-centered').remove();
        this.css({ opacity: 1 });
    }
};

$('#a').loading(true); //start  
setTimeout(function(){ $('#a').loading(false); }, 3000); // stop