jQuery顶部错误与position()

Question

我对此做了一些研究，但我找不到任何符合我需要的

我得到的错误:"Uncaught TypeError:无法读取属性'top'的未定义"在chrome中，但它说它来自jQuery。

$(document).ready(function() {
    var cp = $(".cp");
    var cppos = cp.position();
    var cpleft = cppos.left;
    cp.append('<div class="under-slider"></div>');
    $(".nav-item").hover(function() {
        setTimeout(function() {
            var pos = $(this).position();
            var posLeft = pos.left;
            var td = posLeft - cpleft;
            $(".under-slider").animate({left:td}, 200);
            var cp = $(this);
        }, 100);
    }, function() {     
    });
});

Answer 1

在我看来，您可以使用delay:

$(".nav-item").hover(function () {   
        var pos = $(this).position();
        var posLeft = pos.left;
        var td = posLeft - cpleft;
        $(".under-slider").stop().delay(100).animate({  //stop() or not, depending behaviour you want
            left: td
        }, 200);   
}, function () {
});

现在关于你的问题，this内部的匿名函数回调超时不是你认为它应该是，而是指window对象。

基本上，您可以使用变量闭包，如:

$(".nav-item").hover(function() {
    var $elem = $(this);
    setTimeout(function() {
        var pos = $elem.position();
        var posLeft = pos.left;
        var td = posLeft - cpleft;
        $(".under-slider").animate({left:td}, 200);
    }, 100);
}, function() {
});

或proxify/bind context:

$(".nav-item").hover(function() {
    setTimeout($.proxy(function() {
        var pos = $(this).position();
        var posLeft = pos.left;
        var td = posLeft - cpleft;
        $(".under-slider").animate({left:td}, 200);
        var cp = $(this);
    }, this), 100);
}, function() {
});