JQuery 使用 toggleClass 和 fadeTo答案

【问题标题】：JQuery using toggleClass and fadeToJQuery 使用 toggleClass 和 fadeTo
【发布时间】：2017-02-23 00:56:39
【问题描述】：

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

下面我只写相关代码。

我正在使用引导程序在我的 HTML 中创建一个按钮。该类只是使按钮变白：

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

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

.select {opacity: 0.1;}

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

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

btn-warning 类将颜色变为黄色。

这是我期望发生的事情：

在页面加载时它只是一个纯白色按钮
我点击按钮，它变成黄色并且不透明度改变到 10% 然后淡出到 100%
我再次单击该按钮，它只是变回纯白色按钮
我再次单击它并重复第 2 步
等等等等

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

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

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

这一切都很好，但是当我再次单击它时，JQuery 应该再次添加这两个类并且

【问题讨论】：

您的问题是什么？你到底想做什么？
请创建一个代码 sn-p 以显示您正在尝试做什么以及您要去哪里。它必须从你的问题中理解它
jQuery 使用内联样式为您的淡入淡出动画制作动画。当您尝试第 4 步时，管理不透明度的内联样式可能仍然存在。内联样式将覆盖 .select {opacity: 0.1;}。这只是一个猜测，如果你能提供一个小提琴，那么我们可以帮助你更多。
好的，抱歉。我现在不在我的电脑旁，但是当我在的时候我会发布更多代码。与此同时，我基本上只是在按钮上创建一个切换。它开始是白色的，然后当我单击时，它变成黄色并且不透明度变为 10% 并逐渐消失到 100%。当我第三次点击它时，它又变白了。在第四次单击时，它会变成黄色，不透明度为 10%，然后淡入到 100%。第 4 次点击变成黄色，但不会像第 2 次点击那样淡化。

标签： jquery fadeto

【解决方案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>

【讨论】：