javascript - 悬停功能上的 setTimeout

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

您需要设置超时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();
    });
}());

小提琴

Answer 2

两阶段悬停工作

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

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