JQuery で 文字入れ替えトグルのやり方

Question

<a>すべて表示</a>

のようなボタンがあるとして

jqueryでクリックイベントでクリックされたら

<a>閉じる</a>
みたいにテキストを入れ替えたいです。

そこまではわかるのですが.toggleや.fadetoggleを使ったみたいにフェードイン効果をつけたいのですがうまくいきません。

$("#test_bt").on('click','a', function() {
  $(".more_btn > p").fadeToggle("slow",function () {
    $(".more_btn > p").html("閉じる");
  });
});

↑
トグル動作時にすべてを表示に戻したいです。

どなたかアドバイスを御願い致します。

Answer 1

例えばこんな感じとか？（２つの要素の可視不可視を入れ替え）

<div id="test_bt">
    <a>
        <span>すべて表示</span>
        <span style="display:none">閉じる</span>
    </a>
</div>
<script>
$(function(){
    $("#test_bt").on('click','a', function() {
        var self = $(this);
        var curr = self.find(':visible');
        var next = self.find(':hidden');
        curr.fadeOut("slow", function(){
            next.fadeIn("slow");
        });
    });
})
</script>

もっと単純にやるとこんな感じ？

<div id="test_bt">
    <a>すべて表示</a>
</div>
<script>
$(function(){
    $("#test_bt").on('click','a', function() {
        var self = $(this);
        self.fadeOut("slow", function(){
            if (self.data('opened')) {
                self.text('すべて表示');
                self.data('opened', false);
            } else {
                self.text('閉じる');
                self.data('opened', true);
            }
            self.fadeIn("slow");
        });
    });
})
</script>

Comments

[enokiyo]

最初に隠しておく方法もやってみたのですが表示をいれるときにずりあがってくるようなかんじになってうまくクロスフェードができませんでした。

[enokiyo]

すみません、よく考えたら重ねて隠しておけば良い話ですよね・・・。

Answer 2

$(".more_btn > p").fadeToggle("slow",function () { 
        $(".more_btn > p").html("閉じる"); 
}); 

ではなくて

$(".more_btn > p").fadeToggle("slow");

ですね。
それと、「すべて表示」「閉じる」の文言入れ替えは別に考えたほうがいいです。