调整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/