使用jquery切换显示/隐藏

Question

我需要使用jquery来切换两个要显示/隐藏的元素。我希望按钮显示“隐藏文本”，并更改为“显示文本”时，它被点击，当然，我希望文本从显示切换到隐藏的按钮被点击。我有一个改变它的时间，但我不知道如何改变它回来或使它切换。

$(function() {
    $('button#1').click(function() {
        $('#one').fadeOut();
    });

    $('button#1').click(function() {
        $('button#1').html('Show Text');
    });
});

Answer 1

http://jsfiddle.net/fwdzm/1/

使用切换回调！

$(function() {
    var $btn1 = $('button#1').click(function() {
        $('#one').toggle('slow', function () {
            if ($(this).is(':visible')) {
                $btn1.html('Hide Text');
            } else {
                $btn1.html('Show Text');
            }
        });
    });
});

Answer 2

$('button#1').click(function() {
    var $btn = $(this);
    $('#one').toggle('slow', function() {
       if ($(this).is(':visible')) {
          $btn.text('Hide');
       } else {
          $btn.text('Show Text');
       }
    });
});

Answer 3

试试这样的东西

$(function() {
  $('button#1').click(function(){
    if ($('#one').is(':visible')) {
      $('#one').fadeOut();
      $(this).html('Show Text');
    } else {
      $('#one').fadeIn();
      $(this).html('Hide Text');
    }
  });
});