jQuery Hover Fade Кнопка с активным состоянием

Question

Я не хочу дважды публиковать вопрос; Я пытался опубликовать дополнение к своему первому вопросу, по которому я искал дополнительную помощь. Как можно это сделать?

Вот оригинальный вопрос. jQuery Hover Fade Кнопка с активным состоянием

Хотел посмотреть, есть ли найденное мной решение проблемы.

Проблема, с которой я сейчас обращаюсь за помощью, заключается в том, что все остальные кнопки все еще имеют эффект наведения, но кнопка, которая когда-то была активной, больше не работает.

<ul class="buttons">
    <li><a class="button" href="#">button 1</a></li>
    <li><a class="button" href="#">button 2</a></li>
    <li><a class="button" href="#">button 3</a></li>
</ul>

Лучший способ объяснить это. Если нажата кнопка 2 - она ​​активна. Кнопки 1 и 3 все еще будут зависать. Если вы нажмете кнопку 1 - она ​​активна, и кнопка 2 больше не будет зависать, пока кнопка 3 будет. В конце концов, когда вы проходите серию всех кнопок, анимация перестает отображаться.

Answer 1

Спасибо за вашу помощь, что классы работают по-другому - за исключением того, что текст не был перенесен и отброшен.

Answer 2

Я думаю, что это может сделать то, что вам нужно ... Я не был уверен, что вы хотите затемнить активную кнопку, пока вы все еще зависали над ней, но я так и сделал.

<ul class="buttons">
    <li><a class="button" href="#">button 1</a></li>
    <li><a class="button" href="#">button 2</a></li>
    <li><a class="button" href="#">button 3</a></li>
</ul>
<script>
$('a.button').each(function () {
 var text = $(this).text();

 $(this).append('<span class="hover">'+text+'</span>').find('.hover').css('opacity', 0);

 $(this)
  .hover(function () {
   $(this).find('.hover').stop().fadeTo(500, 1);
  }, function () {
   $(this).find('.hover').stop().fadeTo(500, 0);
  })
  .click (function () {
   $('a.button > span').removeClass('active').addClass('hover');
   $(this).find('span').addClass('active').removeClass('hover').stop().fadeTo(500, 0);
  });
});
</script>

Я также думал об использовании функции toggleClass ...