Question

I’m rather new to jQuery, so I really don’t know if the following problem is caused by something very trivial that I don’t see. In any case, I searched long and hard for an answer but have found none. I hope you can help me!

I’ve been trying to code a simple tabbed menu, complementing my sliding content. I wanted the tabs to have some background that will fade in on hover and that the active class is removed and added accordingly to what tab you click.

Here is my code for the fade effect, using the jQuery color plugin:

$('#menu a').not('.active').hover(function(){
        $(this).stop().animate({backgroundColor: '#FCEA77', 'opacity': '0.3'}, 'slow');
}, function() {
    $(this).stop().animate({backgroundColor: '#000000', color:'#ffffff', 'opacity': '1'}, 'slow');
});

Here is the code for the active class:

$('a').click(function () {  
$(".active").removeClass("active");  
$(this).addClass("active");
}); 

Both work how they should on their own, but when I try to have them work simultaneously the fade effect happens and the active class is removed from the current one when you click on another tab, but the tab which was clicked doesn’t get the active class. Any idea what causes this? If it’s something really easy and obvious, I apologise.

Oh, and here’s my css:

#menu { padding: 10px 0 0 0;
    height: 25px;
    color: white;
    font-weight: bold;
    font-size: 14px;
    position:relative;
}

#menu a{
    color:white;
    padding: 10px;
    text-decoration: none;
}

#menu a.active {
    color:black;
    background:#FCEA77;
}

and my HTML:

       <div id="menu">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#info">Info</a>
        <a href="#team">Team</a>
        <a href="#gallery">Gallery</a>
        </div>

Thank you SO MUCH in advance!

Answer 1

1. Remove all the single quotes from the properties in the animate
2. Use .on('mouseenter', ...) and .on('mouseleave', ...) instead of .hover(...), otherwise only the elements that aren’t active on document ready will be targeted
3. Put a $(this).trigger('mouseleave'); in the click callback

Example here