setTimeout on Hover function

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);
    });
});

我想我的参数有问题，因为每次鼠标移动时都会重新评估坐标值

Answer 1

在两阶段中悬停工作

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

现在你可以根据你的要求在这里应用你的setimeout参考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