Question

我有一段代码在mouseout上隐藏了一个元素。

代码如下所示：

var myMouseOutFunction = function (event) {

    setTimeout(function () {

    $(".classToHide").hide();

    $(".classToShow").show();

    }, 200);

};

这会产生非常接近我想要做的结果。但是，我想等待超时（在这种情况下为200毫秒），然后检查我的鼠标是否仍然“元素”。如果是，我想在所需元素上执行.hide（）和.show（）。

我想这样做是因为如果用户稍微将鼠标移除然后快速将鼠标移回，我不希望元素闪烁（意思是：当用户只想看元素时隐藏然后快速显示）。 / p>

Answer 1

将超时的返回值分配给变量，然后在onmouseover事件中使用clearTimeout。

Answer 2

您应该使用jquery的mouseenter和mouseleave。 mouseenter和mouseleave只会调用一次。如果要检查mouseenter是否再次调用，则使用标志。

  var isMouseEnter ;
    var mouseLeaveFunction = function (event) {
       isMouseEnter = false;
        setTimeout(function () {
             if(isMouseEnter ){ return;}
             $(".classToHide").hide();

                $(".classToShow").show();

           }, 200);
    };
    var mouseEnterFunction = function(){

        isMouseEnter = true;
     }

Answer 3

使用布尔标志：

var mustWait = true;
var myMouseOutFunction = function (event) {

    setTimeout(function () {
        if(mustWait){
            mustWait = false;
        }
        else{
            $(".classToHide").hide();
            $(".classToShow").show();
            mustWait = true;
       }
    }, 200);
};

Answer 4

详细说明Kolink回答

DEMO： http://jsfiddle.net/EpMQ2/1/

var timer = null;
element.onmouseout = function () {
    timer = setTimeout(function () {
      $(".classToHide").hide();
      $(".classToShow").show();
    }, 200);
}

element.onmouseover = function () {
    clearTimeout(timer);
}

在setTimeout（）之后检查是否仍然鼠标移出

4 个答案: