Событие Jquery click повторяется… иногда

У меня есть странная (раздражающая) проблема с небольшим дополнением jquery, которое я кодирую. Он предназначен для управления небольшой вкладкой nav для контента на странице, это не должно быть большой проблемой. В настоящее время в нем есть 3 кнопки (вкладки), и система предназначена для постепенного исчезновения текущей вкладки и содержимого и перехода на новую, когда вы нажимаете на любую из вкладок.

jsfiddle

HTML выглядит следующим образом:

            <div class="fixed-wing-nav-cont">
                <div class="fixed-wing-nav">
                    <div class="fixed-wing-nav-item" id="wing-nav-1">Features</div>
                    <div class="fixed-wing-nav-item"  id="wing-nav-2">Benefits</div>
                    <div class="fixed-wing-nav-item active"  id="wing-nav-3">Screenshots</div>
                </div>
            </div>

            <div class="fixed-wing-tab-cont">
                <div id="fixed-wing-tab-1">
                    Features Tab
                </div>
                <div id="fixed-wing-tab-2">
                    Benefits Tab
                </div>
                <div id="fixed-wing-tab-3" class="active">
                    <img src="images/screens.png" alt="screens" /> <a href="#" class="red">VIEW ALL</a>
                </div>
                <div class="clear"></div>
            </div>

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

.fixed-wing-nav-cont{
    width:100%;
    border-bottom:1px solid #747474;
    margin:20px 0;
}

.fixed-wing-nav{
    display:table;
    border-spacing:5px 0;
    border-collapse:separate;
    margin-left:-5px;
}

.fixed-wing-nav-item{
    margin-right:40px;
    height:40px;
    color:#1c5fa9;
    font-size:16px;
    border-left:1px solid #1c5fa9;
    border-top:1px solid #1c5fa9;
    border-right:1px solid #1c5fa9;
    text-align:center;
    padding:0 10px;
    display:table-cell;
    vertical-align:middle;
    cursor:pointer;
}

.fixed-wing-nav-item.active{
    color:#fff;
    background-color:#1c5fa9;
}

.fixed-wing-tab-cont{
    position:relative;
    width:100%;
    height:400px;
}

.fixed-wing-tab-cont>div{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:400px;
    overflow:hidden;
    display:none;
}

.fixed-wing-tab-cont>div.active{
    display:block;
}

.fixed-wing-tab-cont img{
    border:none;
}

Компонент JQuery очень прост - я знаю, что есть более элегантные способы сделать это, но я решил пойти на то, что означало бы более быстрое кодирование и более простое:

<script type="text/javascript">
$('#wing-nav-1').click(function(){
    $('div.fixed-wing-nav-item').removeClass("active",function(){
        $('#wing-nav-1').addClass("active");
    });
    $('#fixed-wing-tab-3').removeClass("active");
    $('.fixed-wing-tab-cont>div').fadeOut("fast",function(){
        $('#fixed-wing-tab-1').fadeIn("fast");
    });
});

$('#wing-nav-2').click(function(){
    $('div.fixed-wing-nav-item').removeClass("active",function(){
        $('#wing-nav-2').addClass("active");
    });
    $('#fixed-wing-tab-3').removeClass("active");
    $('.fixed-wing-tab-cont>div').fadeOut("fast",function(){
        $('#fixed-wing-tab-2').fadeIn("fast");
    });
});

$('#wing-nav-3').click(function(){
    $('div.fixed-wing-nav-item').removeClass("active",function(){
        $('#wing-nav-3').addClass("active");
    });
    $('#fixed-wing-tab-3').removeClass("active");
    $('.fixed-wing-tab-cont>div').fadeOut("fast",function(){
        $('#fixed-wing-tab-3').fadeIn("fast");
    });
});

</script>

Я загружаю JQuery 1.9 прямо с сайта jquery. Теперь проблема заключается в следующем: страница открывается с загруженной третьей вкладкой, без проблем. Если я нахожусь на первой вкладке, она отлично работает: третья вкладка исчезает, первая затухает, а "активное" состояние с кнопки вкладки перемещается с третьей на первую. Если я затем перейду на вторую вкладку, она также отлично работает. Однако, если я попытаюсь перейти с любой вкладки на третью или с третьей на вторую, она дважды воспроизведет анимацию, что не имеет никакого смысла: все три вкладки работают с одним и тем же кодом. Я просматривал код снова и снова в течение часа, и я не понимаю, почему это происходит. Почему первая вкладка работает отлично, а третья имеет такие проблемы? Я попытался удалить "активное" состояние из всех элементов в HTML (таким образом, запуск закладки/содержимого пуст), и проблема все еще происходит.

Может ли кто-нибудь помочь мне здесь? Это просто не имеет для меня никакого смысла:\