Question

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

1）我怎样才能调整它，所以只有悬停在灰色框上实际上会激活幻灯片而不是灰色框上方的整个不可见区域？

2）有没有更好的方法来实现这一目标？我是JavaScript的初学者，并且在Google搜索中发现了一些我发现的东西。例如，根据内容自动生成高度而不依赖于固定高度会很好。

$(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/

调整悬停区域的jQuery滑动框

1 个答案: