Weird behaviour using animations and removeClass/addClass in jQuery

I’m trying to create a fancy little animation when opening and closing a search field underneath a nav bar. The nav bar is either black or white and the search area always the opposite. But once the search area is closed I want the nav bar to change it’s color to the opposite color. During the closing of the search area I display an overlay over the nav bar that grows in height, so it looks as if the search are area slides into and becomes the nav bar. Once the overlay has the size of the nav bar the nav bar color changes and the overlay fades out to make the inverted nav bar visible again. You can check it out right here [url]http://xweasel.chris-cole.de/v3/[/url] and here [url]http://xweasel.chris-cole.de/v3/search.php?Description=meg+test[/url]

Here are some screenshots:

[url]https://i.stack.imgur.com/RTdED.jpg[/url]

So the problem seems to be, that the color change of the nav bar sometimes happens once (as intended) and sometimes twice for some reason (addClass and removeClass .inverted) which makes the nav bar show in the wrong color. This happens (at least to me) totally randomly. Sometimes it works 5 times, sometimes I get the wrong color on the second try.

This is my first post and English is not my mother language, so pleas have mercy on me 😉 Thanks for your help!

[CODE]// Quick Search – Click
// ————————–

$(‘#search-icon’).click(function() {

if($(‘#search-bar’).hasClass(‘active’)) // Close the Search Bar
{
$(‘#search-bar-inner’).fadeOut( 500, function() {
// Animation complete.

var bottompos = $(document).height() – $(‘#nav-bar’).height();
$(‘#nav-overlay’).css(“bottom”, bottompos + “px”);

if($(‘#nav-bar’).hasClass(‘inverted’)) // Nav Bar is black and search bar is open (index page)
{
$(‘#nav-overlay’).css(“background-color”, “#fff”);
}
else // Nav Bar is white and search bar is open (search page)
{
$(‘#nav-overlay’).css(“background-color”, “#333”);
}

$(‘#nav-overlay’).css(“display”, “block”);

$(‘#search-bar’).slideUp(500, function() {
// Animation complete
$(‘#search-bar’).removeClass(‘active’);
$(‘#search-icon’).removeClass(‘active’);
});

$(‘#nav-overlay’).animate({
height: 60 + “px”
}, 500, function() {
// Animation complete.
if($(‘#nav-bar’).hasClass(‘inverted’)) // Nav Bar is black
{
$(‘#nav-bar’).removeClass(‘inverted’);
}
else // Nav Bar is white
{
$(‘#nav-bar’).addClass(‘inverted’);
}

$(‘#nav-overlay’).animate({
opacity: 0
}, 300, function() {
// Animation complete.
$(‘#nav-overlay’).css(“display”, “none”);
$(‘#nav-overlay’).css(“opacity”, 1);
$(‘#nav-overlay’).css(“height”, 0);
});
});

});
}
else // Open the Search Bar
{
$(‘#search-icon’).addClass(‘active’);

if($(‘#nav-bar’).hasClass(‘inverted’)) // Nav Bar is black and Search Bar is closed (search page)
{
$(‘#nav-overlay2’).css(“background-color”, “#fff”);
}
else // Nav Bar is white and Search Bar is closed (index page)
{
$(‘#nav-overlay2’).css(“background-color”, “#333”);
}

$(‘#nav-overlay2’).css(“display”, “block”);

$(‘#search-bar’).slideDown( 500, function() {
// Animation complete.
$(‘#search-bar-inner’).fadeIn(500, function() {
// Animation complete
$(‘#search-input’).focus();
});
});

$(‘#nav-overlay2’).animate({
height: 60 + “px”
}, 500, function() {
// Animation complete.

if($(‘#nav-bar’).hasClass(‘inverted’)) // Nav Bar is black
{
$(‘#nav-bar’).removeClass(‘inverted’);
$(‘#site-wrapper’).append(‘<br>white’);
}
else // Nav Bar is white
{
$(‘#nav-bar’).addClass(‘inverted’);
$(‘#site-wrapper’).append(‘<br>black’);
}

$(‘#nav-overlay2’).animate({
opacity: 0
}, 300, function() {
// Animation complete.
$(‘#nav-overlay2’).css(“display”, “none”);
$(‘#nav-overlay2’).css(“opacity”, 1);
$(‘#nav-overlay2’).css(“height”, 0);
$(‘#search-bar’).addClass(‘active’);
});
});
}

});[/CODE]

Also in #JavaScript _↴