Question

我已就此做了一些研究，但我找不到任何符合我需要的东西。

我收到错误：＆＃34;未捕获的TypeError：无法读取属性＆＃39; top＆＃39;未定义＆＃34;在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() {

});

jQuery与position（）的顶级错误

1 个答案: