jquery - JQuery replaceWith/トグル

Question

いくつかのデータ ビジュアルの 3 x 3 グリッドがあります。ユーザーがグリッド内のタイルにカーソルを合わせるたびに、コンテンツを変更してテキスト付きの無地の背景色をレンダリングし、ユーザーがタイルから離れるとゲージに戻りたいと考えています。.effect など、これを行うためにいくつかの異なる方法を試しましたが、通常、コンテンツを非表示/表示するときに問題が発生しました。以下の replaceWith 関数を使用して、目的の置換効果を取得しています別の replaceWith ゲージに戻すことができません。私の関数または別の JQuery 関数を変更して試す方法について何か提案はありますか?

   $('#fooChartButton').hover(function () {
        $('#fooChartButton').fadeOut('slow', function () {
            $('#fooChartButton').replaceWith('<a href="#" id="fooReplaceChartButton"><div class="large-3 large-offset-1 columns replaceGaugeArea"><div>foo<br />Chart</div></div></a>');
            $('#fooReplaceChartButton').show().fadeIn('fast');
        });
});

行 HTML:

<div class="row">
    <a href="#" id="foo1ChartButton">
        <div class="large-3 large-offset-1 columns modalGaugeArea">
            <span class=foo1Title">foo1</span>
            <div id="foo1Gauge" class="gaugeContainer"></div>
            <span class="foo1Dialogue">foo1</span>
        </div>
    </a>
    <a href="#" id="foo2ChartButton">
        <div class="large-3 large-offset-1 columns modalGaugeArea">
            <span class="foo2Title">foo2</span>
            <div id="foo2tGauge" class="gaugeContainer"></div>
            <span class="foo2Dialogue">foo2</span>
        </div>
    </a>
    <a href="#" id="foo3ChartButton">
        <div class="large-3 large-offset-1 columns modalGaugeArea">
            <span class="foo3Title">foo3</span>
            <div id="foo3Gauge" class="gaugeContainer"></div>
            <span class="foo3Dialogue">foo3 Activity</span>
        </div>
    </a>
</div>

各タイル CSS:

.modalGaugeArea {
    color: #000000;
    font-weight: bold;
    text-align: center;
    background-color: #ffffff;
    opacity: 1;
    -webkit-box-shadow: 0px 3px 5px #808080;
    box-shadow: 0px 3px 5px #808080;
    margin-top:5px;
    margin-bottom: 5px;
}