JQuery using toggleClass and fadeTo

Question

I'm trying to do something that seems pretty simple, but its not working right. Maybe I'm making it too simple.

I will just write the pertinent code below.

I'm using bootstrap to create a button in my HTML. The class just makes the button white:

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

Next I created a class in my CSS. It just makes an element transparent:

.select {opacity: 0.1;}

Finally, in JQuery I use the toggleClass and fadeTo functions to animate the button when it is clicked:

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

The btn-warning class changes the color to yellow.

Here is what I'm expecting to happen:

1. On page load its just a plain white button
2. I click the button and it changes to yellow and the opacity changes to 10% then fades up to 100%
3. I click the button again and it just changes back to a plain white button
4. I click it again and it repeats step 2
5. so on and so forth

Seems simple enough. Step 1 works as expected, Step 2 is perfection, Step 3 excellent, Step 4... no dice

It only does the fadeTo on the first click, after that it changes to yellow, as it should, but no fadeTo effect.

Logically, I have my plain default button. I click it and JQuery will add the btn-warning and select classes to the button which turns it yellow and sets the opacity to 10%, then fade the opacity up to 100%. I click it again and JQuery removes the btn-warning class and select class, which turns the button back to its original form, the fadeTo has no effect because the opacity without the select class is already 100%.

That's all good, but when I click it again JQuery should add the two classes again and the

Answer 1

Reset the opacity to 0.1 and replicate fadeTo using animate method

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>