Question

我有一个简单的代码，可以在鼠标悬停在其上时保持元素可见，并在鼠标移出后隐藏它。：

$(".item").hover(
    function () {
        $(this).show();
    }, 
    function () {
        $(this).hide();
    }                       
);

我想在它隐藏之前添加一些延迟，但添加$(this).delay(500).hide();似乎不起作用...

Answer 1

没有任何参数的

.hide()不使用效果队列（并且不必等待.delay()）。相反，您可以使用$(this).delay(500).hide(0);

Answer 2

var my_timer;
$(".item").hover(
    function () {
        clearTimeout(my_timer);
        $(this).show();
    }, 
    function () {
        var $this = $(this);
        my_timer = setTimeout(function () {
            $this.hide();
        }, 500);
    }                       
);

以下是演示：http://jsfiddle.net/e3cNK/1/

如果您希望能够在隐藏元素后重新显示该元素，那么您希望更改元素的不透明度，而不是将其display更改为none。这将使元素保持在页面的常规流中，因此当用户将鼠标悬停在隐藏元素上时，它可以再次显示：

var my_timer;
$(".item").hover(
    function () {
        var $this = $(this);
        $this.text('Mouse-Over');
        clearTimeout(my_timer);
        $this.stop().fadeTo(250, 1);
    },
    function () {
        var $this = $(this);
        $this.text('Mouse-Out');
        my_timer = setTimeout(function () {
            $this.fadeTo(250, 0);
        }, 500);
    }                       
);

以下是演示：http://jsfiddle.net/e3cNK/2/

使用/ jQuery在.hide（）之前添加延迟

2 个答案: