jQuery Hover Fade Button with an Active State

Question

The following scripting is a custom addition to this Hover Fade Button; in my version it keeps the text of the button while changing the background images through css classes only. Hover Fade Method

I have able to everything except when you click on another button you get two active buttons and so on. I like the buttons to hover {span.hover class}, click {span.active class}, and remove any other buttons with the span.active class and put back to regular state.

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

$('a.button').each(function () {
    var text = $(this).text();

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

    $(this).hover(function () {
        $span.stop().fadeTo(500, 1);
    }, function () {
        $span.stop().fadeTo(500, 0);
    }).click (function () {
        $(this).empty().append('<span class="active">'+text+'</span>');
    });
});

Greatly appreciate a solution!

Answer 1

As I understand it, you need to remove the hover class from the other spans in your click event handler, to make sure only the clicked one is 'active'. Try this:

$('a.button').each(function () {
    var text = $(this).text();

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

    $(this).hover(function () {
        $span.stop().fadeTo(500, 1);
    }, function () {
        $span.stop().fadeTo(500, 0);
    }).click (function () {
        $('a.button > span.active').removeClass();
        $(this).empty().append('<span class="active">'+text+'</span>');
    });
});

Answer 2

In the click, before you append text.

$('a.button span').remove().each(
   function(){
      var oldText = $(this).text();
      $(this).parent().text(oldText);
   }
);

My assumption was that you need to remove the span element you created in each anchor and move the text back to the anchor itself.

Answer 3

I am back as I found a small problem with the solution. Within the buttons when hovering it adds the span.hover class; when you click it adds the span.active class and removes any other buttons with the span.active class.

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.