Question

我在向mouseOut函数添加延迟时遇到问题。这是jquery代码：

$(document).ready(function() {
$('.nav').mouseover(function() {
    $('.nav').css({ left: '160px' });
});
$('.nav').mouseout(function() {
    $('.nav').delay(600).css({ left: '0' });
});
});

我认为添加延迟部分可以做到......但它仍然表现得好像根本不存在。

建议？

修改

建议的setTimeout函数有效 - 但是创建了一个新问题。即使仍然在选定的'.nav'div上，此效果现在也会触发。

这是问题的一个方面： http://jsfiddle.net/TRL4w/

Answer 1

delay（）函数仅适用于动画。尝试：

$('.nav').mouseout(function() {
    setTimeout(function(){$('.nav').css({left: '0'});}, 600)
});

来自.delay()文档：

.delay（）方法最适合在排队的jQuery之间延迟效果。因为它是有限的 - 例如，它没有提供一种方法取消延迟-.delay（）不是JavaScript本机的替代品 setTimeout函数，可能更适合某些用途例。

Answer 2

尝试使用.mouseover()和.stopPropagation();

示例：

$(document).ready(function () {
    $('header').hover(function (e) {
        e.stopPropagation();
        console.log('in');
        $('.nav').css({
            left: '160px'
        });
    },function () {
        console.log('out');
        setTimeout(function () {
            $('.nav').css({
                left: '0px'
            });
        }, 2000)
    });
});

jquery延迟mouseOut效果？

2 个答案:

Demo