Javascript 当鼠标移动时，Jquery顺序显示单位

我编写了一个简单的代码：

JSFiddle：

问题是，当鼠标悬停时，快速块混合。 在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();
});

$（文档）.ready（函数（）{
var标志=1；
变量长度=$（“.slideMenu ul li”）。长度；
var-num=1；
var numHover；
var numTmp=0；
$（“.slideMenuCont.item”）.fadeOut（0）；
$（“.slideMenuCont.item:eq（0）”）.fadeIn（500）；
var myInterval=函数（）{
间隔=设置间隔（函数（）{
如果（num>=liLength）
num=0；
$（“.slideMenu ul li”）.removeClass（“活动”）；
$（“.slideMenu ul li:eq（“+num+”）.addClass（“活动”）；
$（“.slideMenuCont.item”）.fadeOut（0）；
$（“.slideMenuCont.item:eq（“+num+”））.fadeIn（500）；
num++；
},3000);
}
var stop=函数（）{
清除间隔（间隔）
}
美元（“.slideMenu ul li”）。在({
鼠标指针：函数（）{
停止（）；
如果（num>=1）
numTmp=num-1；
else numTmp=num；
numHover=$（“.slideMenu ul li”）.索引（本）；
num=numHover；
如果（numHover！=nummp）{
$（“.slideMenu ul li”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
美元（“.slideMenuCont.item”）。淡出（500）；
$（“.slideMenuCont.item:eq（“+num+”））.fadeIn（500）；
}
},
mouseleave:function（）{
如果（num尝试一下

这将解决显示问题，同时保持500秒的淡入

当快速移动鼠标时，它基本上会清除显示内容，因此不会出现混乱的过渡

$(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(500);
        $(".slideMenuCont .item:eq("+num+")").fadeIn(500);
        num++;
    },3000);
}
var stop = function(){
    clearInterval(interval);
}
$(".slideMenu ul li").on({
    mouseenter: function () {
        stop();
        $(".slideMenu ul li").removeClass("active");
        if(num>=1)
            numTmp=num-1;
        else numTmp=num;
        numHover=$(".slideMenu ul li").index(this); 
        num=numHover;
        if(numHover!=numTmp){
            $(".slideMenuCont .item").fadeOut(0);
            $(".slideMenuCont .item").stop().fadeOut(500); 
            $(".slideMenuCont .item").css("display","none");
            $(this).addClass("active");
             $(".slideMenuCont .item:eq("+num+")").fadeIn(500);
        }
    },
    mouseleave: function () {
        if(num<liLength)
            num++;
        myInterval();
    }
});
var Auto = function(){
    myInterval();
}
Auto();

$（文档）.ready（函数（）{
var标志=1；
变量长度=$（“.slideMenu ul li”）。长度；
var-num=1；
var numHover；
var numTmp=0；
$（“.slideMenuCont.item”）.fadeOut（0）；
$（“.slideMenuCont.item:eq（0）”）.fadeIn（500）；
var myInterval=函数（）{
间隔=设置间隔（函数（）{
如果（num>=liLength）
num=0；
$（“.slideMenu ul li”）.removeClass（“活动”）；
$（“.slideMenu ul li:eq（“+num+”）.addClass（“活动”）；
美元（“.slideMenuCont.item”）。淡出（500）；
$（“.slideMenuCont.item:eq（“+num+”））.fadeIn（500）；
num++；
},3000);
}
var stop=函数（）{
间隔时间；
}
美元（“.slideMenu ul li”）。在({
鼠标指针：函数（）{
停止（）；
$（“.slideMenu ul li”）.removeClass（“活动”）；
如果（num>=1）
numTmp=num-1；
else numTmp=num；
numHover=$（“.slideMenu ul li”）.索引（本）；
num=numHover；
如果（numHover！=nummp）{
$（“.slideMenuCont.item”）.fadeOut（0）；
$（.slideMenuCont.item”）.stop（）.fadeOut（500）；
$（.slideMenuCont.item”）.css（“显示”、“无”）；
$（此）.addClass（“活动”）；
$（“.slideMenuCont.item:eq（“+num+”））.fadeIn（500）；
}
},
mouseleave:function（）{
如果在另一个网站上（numThis是一个选项。但是幻灯片突然发生变化。眼睛上的努力），我被提供添加.stop（）.fadeOut（500）；这也是一个选项，但我仍然看到.stop（）；fadeOut（500）的内容模糊。如果您更改菜单项，使每个项具有不同的单词，则会更加明显。尝试将这两种效果组合在一起：$（“.slideMenuCont.item”）.stop（）.fadeOut（500）；和$（“.slideMenuCont.item”）.css（“显示”，“无”）；