Javascript 调整jQuery滑动框的悬停区域

我正在使用一些jQuery创建3个框，悬停时向上滑动以显示更多内容。我的两个问题是：

1） 我如何调整它，使其仅在灰色框上悬停实际上激活幻灯片，而不是灰色框上方的整个不可见区域

2） 有没有更好的方法来实现这一点？谈到JavaScript，我是一个初学者，我一起在谷歌搜索中发现了一些东西。例如，最好根据内容自动生成高度，而不是依赖固定高度

---

你几乎自己做到了：

$(document).ready(function () {
    $('.boxgrid .boxcaption').hover(function () {
        $(this).stop().animate({top: '120px'}, {
            queue: false,
            duration: 150
        });
    }, function () {
        $(this).stop().animate({top: '210px'}, {
            queue: false,
            duration: 150
        });
    });
});

---

谢谢！是否有任何方法可以动态调整打开的盒子的高度（而不是固定高度），或者需要完全不同的方法？动态扩展.boxcaption的高度，以便里面的任何内容（在本例中为H3和lorem ipsum）都适合。目前，它的高度是通过CSS固定的。

$(document).ready(function () {
    $('.boxgrid .boxcaption').hover(function () {
        $(this).stop().animate({top: '120px'}, {
            queue: false,
            duration: 150
        });
    }, function () {
        $(this).stop().animate({top: '210px'}, {
            queue: false,
            duration: 150
        });
    });
});