JQuery Fade в коде имеет цикл устранения ошибок

Построение одного из моих первых фрагментов кода JQuery, чтобы скрыть некоторые изображения и исчезнуть в каком-то тексте, и, кажется, отлично работает, пока ваша мышь не будет быстрой и, похоже, повторится.

Просто нужны свежие глаза, так как я работаю над этим некоторое время, и я новичок в JQuery, поэтому любые советы очень ценятся.

Я включил ссылку на сайт и связанные с JQuery и CSS

Текущий сайт в стадии разработки

JQuery для непрозрачности и угасания

    $(document).ready(function ()
{

    //on hover change opacity of other images
    $("#slider ul li").delegate("img", "mouseover mouseout", function (e)
    {
        $("#slider ul li img").not(this).css("opacity", e.type == 'mouseover' ? 0.3 : 1);
    });

    //Fade in text located in span
    $(".img_left").hover(function ()
    {
        $(".title.one").fadeIn(500).css('display', 'inline-block');
        $(".description.one").fadeIn(700).css('display', 'inline-block');
    }, function ()
    {
        $(".title.one").fadeOut(50).css('display', 'inline-block');
        $(".description.one").fadeOut(50).css('display', 'inline-block');
    });

    $(".img_center").hover(function ()
    {
        $(".title.two").fadeIn(500).css('display', 'inline-block');
        $(".description.two").fadeIn(700).css('display', 'inline-block');
    }, function ()
    {
        $(".title.two").fadeOut(50).css('display', 'inline-block');
        $(".description.two").fadeOut(50).css('display', 'inline-block');

    });
});

CSS, связанный с JQuery

#slider ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

#slider ul li {
    text-align: left;
    left: -375px;
    bottom: 25px;
    display: inline;
}

#slider ul li a
{
    text-decoration: none;
    padding: .2em 1em;
    color: #FFF;
    background-color: #000;
}

#slider ul li a:hover
{
    color: #FFF;
    background-color: #000;
}


.title {
    width: 300px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    z-index: 100;
    position: relative;
    color: #ED8E29;
    display: none;
}

.description {
    width: 300px;
    font-size: 12px;
    z-index: 100;
    position: relative;
    color: #ED8E29;
    display: none;
}            

.title.one {
    top: 150px;
    right: -20px;
}      

.description.one {
top: 200px;
right: 260px;
}

.title.two {
    top: 130px;
    right: -350px;
}

.description.two {
    top: 200px;
    left: 70px;
}