Question

我有一个显示/隐藏按钮，当它被点击时，它会显示一个内容文本，当再次单击它时，它会隐藏文本。但我不是在谈论这个文本，而是关于按钮的文本。

按钮交替显示＆＃34;显示＆＃34;和＆＃34;关闭＆＃34;在点击。我的问题是，在点击时，在更改按钮文本时，更改是突然的。我想给它制作动画，给出一个效果，比如easeInCirc效果，所以＆＃34; Show＆＃34;和＆＃34;关闭＆＃34;文本缓慢，平滑，逐渐地出现和消失......

我找到了类似问题here的答案，并尝试使用不透明效果，但下面的代码不起作用，按钮文字没有显示不透明度...

HTML

<div class="bttn">Show</div>
<div class="content">here is the content text</div>

脚本：

$(".bttn").click(function(){
    $(".content").animate({width: 'toggle'}, 700, 'easeInCirc');       
    $(this).css('opacity', '0').html(function (_, oldText) {return oldText == 'Show' ? 'Close' : 'Show'}).animate({opacity: 1}, 700);
});

如果您知道使用此代码的解决方案，我会给您一个之前使用过的代码：

    // first i used this code
    $(this).text($(this).text() == "Show" ? "Close" : "Show");

对按钮的文本更改的影响

0 个答案: