javascript - 使用 jQuery 替换按钮文本

Question

有一个按钮，我正在使用 SlideToggle 来显示 div。按钮文本为“显示部分客户端列表”...单击后，它会更改为“隐藏部分客户端列表”。它工作正常，但我想知道是否可以添加过渡效果，这样文本就不会在点击时突然改变。

JS

$(document).ready(function(){
   $('.show-clients').click(function() {
   $('.more').slideToggle(400);
   $(this).text($(this).text() == 'Show Partial Client List' ? 'Hide Partial Client List' : 'Show Partial Client List');
   return false;
   });
});

.more 类附加到隐藏的 div，其中包含单击按钮时将显示的内容。

HTML

<a href="#/" class="button solid show-clients">Show Partial Client List</a>

Answer 1

可以，但这样做时，您不会使用 text() 方法来更新它。您需要向包含文本的按钮添加一个容器，并在文本更改时淡入和淡出该容器。

HTML

<a href="#/" class="button solid show-clients"><div class="fadr">Show Partial Client List</div></a>

JS

  $('.fadr').fadeOut( 1000, function() {
     $('.fadr').html("Your New Text");
     $('.fadr').fadeIn();
  });