JQuery using toggleClass и fadeTo

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); 

Класс БТН-предупреждение меняет цвет на желтый.

Вот что я ожидаю, чтобы это произошло:

1. На странице загрузки ее просто обычную белую кнопку
2. я нажимаю кнопку, и он меняется на желтый и непрозрачностью изменения до 10%, то затухает до 100%
3. я нажимаю кнопку еще раз, и он просто меняется обратно на обычную белую кнопку
4. я нажимаю снова и повторяет шаг 2
5. так на и т. д.

Похоже, достаточно просто. Шаг 1 работает, как и ожидалось, Шаг 2 - это совершенство, Шаг 3 отлично, Шаг 4 ... нет кубиков

Он только делает fadeTo при первом щелчке, после чего он меняется на желтый, как и должно быть, но нет fadeTo эффект.

По логике, у меня есть простая кнопка по умолчанию. Я нажимаю на него, а JQuery добавляет предупреждение btn и выбирает классы на кнопке, которая превращает его в желтый цвет, и устанавливает непрозрачность до 10%, а затем уменьшает непрозрачность до 100%. Я снова нажимаю на него, и JQuery удаляет класс btn-warning и выбирает класс, который возвращает кнопку в исходную форму, fadeTo не действует, потому что непрозрачность без выбранного класса уже 100%.

Это все хорошо, но когда я нажимаю снова JQuery следует добавить два класса снова и

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>