JQuery 使用 toggleClass 和 fadeTo

Question

我正在尝试做一些看起来很简单的事情，但它不能正常工作。也许我说得太简单了。

下面我就写相关的代码。

我正在使用 bootstrap 在我的 HTML 中创建一个按钮。 class 只是使按钮变白：

<button id="my_button" class="btn-default">Button</button>

接下来我在 CSS 中创建了一个 class。它只是使一个元素透明：

.select {opacity: 0.1;}

最后，在 JQuery 中，我使用 toggleClass 和 fadeTo 函数在单击按钮时为按钮设置动画：

${'#my_button'}.toggleClass('btn-warning select').fadeTo('slow', 1);

btn-warning class 将颜色更改为黄色。

这是我期待发生的事情：

在页面加载时它只是一个普通的白色按钮
我点击按钮，它变成黄色，不透明度改变到 10% 然后逐渐消失到 100%
我再次点击按钮，它又变回纯白色按钮
我再次点击它，它重复第 2 步
等等等等

看起来很简单。第 1 步按预期工作，第 2 步完美，第 3 步出色，第 4 步...没有骰子

它只在第一次点击时做 fadeTo，之后它变成黄色，但没有 fadeTo 效果。

逻辑上，我有我的普通默认按钮。我单击它，JQuery 将添加 btn-warning 和 select classes 到按钮，按钮变成黄色并将不透明度设置为 10%，然后将不透明度淡化到 100% .我再次单击它，JQuery 删除了 btn-warning class 和 select class，这将按钮变回其原始形式，fadeTo 没有效果，因为不透明度没有 select class 已经是 100%。

一切都很好，但是当我再次单击它时 JQuery 应该再次添加两个 class 和

Answer 1

将不透明度重置为 0.1 并使用动画方法复制 fadeTo

var myBtn = $('#my_button');
$(myBtn).click (function () {
  $(myBtn).toggleClass('btn-warning');
  if ($(myBtn).hasClass ("btn-warning")) {
    $(myBtn).css ({opacity: 0.1}); 
    $(myBtn).animate ({opacity: 1.0}, 1000);  
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="my_button" class="btn btn-lg btn-default">Button</button>

JQuery 使用 toggleClass 和 fadeTo

JQuery using toggleClass and fadeTo

jquery

fadeto