Question

您好我想在此悬停上实现一个函数setTimout。 http://jsfiddle.net/u3pW8/33/

    $(function() {
    $("#moving .wrapper").mousemove(function (e) {
        var parentOffset = $(this).parent().offset(); 
        var relX = e.pageX - parentOffset.left;
        $(this).children(".hidden-content").css("left", relX);
    });

    $("#static .wrapper").hover(function (e) {
        var parentOffset = $(this).parent().offset(); 
        var relX = e.pageX - parentOffset.left;
        $(this).children(".hidden-content").css("left", relX);
    });
});

我认为我的参数有问题，导致每次鼠标移动都会重新评估coordonates

Answer 1

悬停在两个阶段的工作

$("#static .wrapper").hover(function (e) {
    // first stage it is wok on mouseover
}, function (e) {
    // second stage it is wok on mouseout
});

现在您可以根据您的要求在此处应用您的settimeout 参考 HOVER

Answer 2

您需要设置超时onmouseenter并将实际显示的代码和隐藏内容放入单独的函数中：

(function () {
    var delay = 400,
        timeout;

    function showChild(posLeft) {
        $(this).children(".hidden-content").css('left', posLeft).show();
    }

    $("#static .wrapper").mouseenter(function (e) {
        var that = this,    
            event = e;

        if (timeout) {
            clearTimeout(timeout);
        }
        timout = setTimeout(function () {
            var parentOffset = $(that).parent().offset(); 
            var relX = event.pageX - parentOffset.left;
            showChild.call(that, relX);
        }, delay);
    }).mouseleave(function () {
        if (timeout) {
            clearTimeout(timeout);
        }
        $(this).children(".hidden-content").hide();
    });
}());

Fiddle

关于悬停功能的setTimeout

2 个答案: