javascript - 调整 jQuery 滑动框的悬停区域

Question

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

1）我该如何调整它，以便只有将鼠标悬停在灰色框上才能真正激活幻灯片，而不是灰色框上方的整个不可见区域？

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

http://jsfiddle.net/kUjax/

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

Answer 1

你几乎是自己做的：

$(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
        });
    });
});

http://jsfiddle.net/kUjax/1/