Последовательное отображение блоков при наведении

Добрый день. Сделал такую простенькую штуку:
http://jsfiddle.net/xmocartx/sr194nsb/4/

Беда в том, что если провести мышкой по менюшке, то выходит каша блоков.
В jquery новичок, подскажите, пожалуйста, как можно это дело поправить?

$(document).ready(function() {
var flag = 1;
var liLength = $(".slideMenu ul li").length;
var num = 1;
var numHover;
var numTmp=0;
$(".slideMenuCont .item").fadeOut(0);
$(".slideMenuCont .item:eq(0)").fadeIn(500);            
var myInterval = function(){
    interval = setInterval(function(){
        if(num>=liLength)
            num=0;
        $(".slideMenu ul li").removeClass("active");
        $(".slideMenu ul li:eq("+num+")").addClass("active");
        $(".slideMenuCont .item").fadeOut(0);
        $(".slideMenuCont .item:eq("+num+")").fadeIn(500);
        num++;
    },3000);
}
var stop = function(){
    clearInterval(interval)
}
$(".slideMenu ul li").on({
    mouseenter: function () {
        stop();
        if(num>=1)
            numTmp=num-1;
        else numTmp=num;
        numHover=$(".slideMenu ul li").index(this); 
        num=numHover;
        if(numHover!=numTmp){
            $(".slideMenu ul li").removeClass("active");
            $(this).addClass("active");
            $(".slideMenuCont .item").fadeOut(500);
            $(".slideMenuCont .item:eq("+num+")").fadeIn(500);
        }
    },
    mouseleave: function () {
        if(num<liLength)
            num++;
        myInterval();
    }
});
var Auto = function(){
    myInterval();
}
Auto();
});