javascript - 动画步骤函数中的 jQuery 对象在每次函数调用时返回 "undefined"

Question

我正在尝试使用以下代码稍微修改 jQuery 动画:

web_links.mouseenter(function() {
    var site = $(this).closest('.site');
    var image = site.find('.image').first();
    var offset = '-' + image.height();
    var caption = site.closest('.caption').first();                    
    site.find('.image').first().stop().animate({top: offset}, {
        duration: 400,
        step: function(curTop) {
            console.log(caption);
            console.log(caption.css("top");
            if (curTop < -191) {
                caption.css({top: curTop + "px"});
            }
        }
    });
});

奇怪的是，caption 似乎是一个有效的 jQuery 对象，它实现了 css()，但是当我尝试对其调用 css() 方法时，它返回 未定义。当我尝试 offset() 时也会发生同样的情况。

有没有人知道为什么会发生这种情况？一夜之间我一直在绞尽脑汁，但它似乎没有任何意义。

Answer 1

我猜这行不匹配任何元素:

var caption = site.closest('.caption').first();

测试 .length 以确定。如果它是 0，那就是问题所在。

console.log(caption.length);

---

FWIW，在 .closest() 之后不需要 .first()，因为 .closest() 最多返回1 元素...因此是函数名称的 "est" 部分。 ;-)