Question

有一个按钮，我使用slideToggle来显示div。按钮文本是＆＃34;显示部分客户列表＆＃34; ...单击时，它将更改为＆＃34;隐藏部分客户列表＆＃34;。它工作正常，但我想知道我是否可以添加过渡效果，因此文本不会突然改变点击。

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

您可以使用.fadeIn()和.fadeOut() jQuery函数：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#/" class="button solid show-clients">Show Partial Client List</a>

＆＃13;

Answer 2

您可以，但为此，您不会使用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();
  });

用jQuery

2 个答案: