Question

我制作了一个简单的代码：

JSFiddle：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();
});

Answer 1

试一试。

这应该可以修复显示问题，同时保留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();

}）;

更新：尝试合并两个$（＆＃34; .slideMenuCont .item＆＃34;）。stop（）。fadeOut（500）;和 $（＆＃34; .slideMenuCont .item＆＃34;）。css（＆＃34; display＆＃34;，＆＃34; none＆＃34;）;

Jquery顺序显示单位时的鼠标

1 个答案: