Question

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

我将在下面写下相关代码。

我正在使用bootstrap在我的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-warning并选择按钮的类，将其变为黄色并将不透明度设置为10％，然后将不透明度淡化为100％。我再次单击它并且JQuery删除了btn-warning类并选择了class，它将按钮恢复为原始形式，fadeTo没有效果，因为没有select类的不透明度已经是100％。

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

Answer 1

将不透明度重置为0.1并使用animate方法复制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

1 个答案: