Question

我一直在尝试调整菜单幻灯片，并将下面显示的部分代码分别显示在菜单中的4个项目中。我这样做了如果你将光标移动到给定的菜单项上，相应的div将显示在显示屏中。我还添加了一个超时，所以如果你快速从一个菜单项移动到另一个菜单项，它不会很快从一个div切换到另一个div。我现在要使其完全按照预期工作的问题是我如何制作它以便在切换到该菜单项之前检查光标是否仍然在200毫秒后悬停在给定的菜单项上？感谢任何评论或帮助。感谢。

$("div#menu .reps").hover(function() {
    window.clearTimeout(timeoutID);
    timeoutID = window.setTimeout(hoverFunctionReps, 280);
});

function hoverFunctionReps(){
    if(current_slide != "reps"){

        $(".arrow").animate({"left":"135px"});

        if(current_slide == "clients"){
            $(".clients_display").stop(true,true).fadeOut().hide();
            $(".reps_display").fadeIn().show();
            current_slide = "reps";
        }
        else if(current_slide == "services"){
            $(".services_display").stop(true,true).fadeOut().hide();
            $(".reps_display").fadeIn().show();
            current_slide = "reps";
        }
        else{
            $(".training_display").stop(true,true).fadeOut().hide();
            $(".reps_display").fadeIn().show();
            current_slide = "reps";
        }
    }
}

Answer 1

也许是这样的：

http://jsfiddle.net/lucuma/ZgNKG/

var timeoutID;

$(document).ready(function() {
$("a").hover(function() {
    window.clearTimeout(timeoutID);
    $(this).data('hashover', '1');
    var that = this;
     timeoutID=window.setTimeout(
        (function() {
        hoverFunctionReps(that); 
        }), 280);

}, function() {
    $('span', this).hide();
   $(this).data('hashover', '0');
});

function hoverFunctionReps(me) {
    if ($(me).data('hashover') == '1') {
        $('span', me).show();
    }
}
});

jquery菜单幻灯片验证悬停功能

1 个答案: