jQuery Hover Fade Button with an Active State

Question

I do not want to double post a question; I was trying to post an add-on to my first question that I was looking for additional help. How does one go about this?

Here is the original question. jQuery Hover Fade Button with an Active State

Was hoping to see if there is a solution to the glitch I found.

The problem I am now looking for help with is all other buttons still have the hover effect, but a button that was once active no longer does.

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

Best way to explain this. If button 2 is clicked – it is now active. Buttons 1 and 3 will still hover. If you click on button 1 – it is now active and button 2 will no longer hover while button 3 will. Eventually when you go through the series of all buttons the animation hover is no longer.

Answer 1

I think this might do what you need... I wasn't sure if you wanted to fade out the active button while you were still hovered over it, but that's what I did.

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

I also thought about using the toggleClass function instead...

Answer 2

Thanks for your help that is a different effect the classes worked - except the text didn't get carried over and got dropped.