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:
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
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>