Javascript 如何将DIV jquery动画重新连接到容器DIV。。？

我有一个有一堆缩略图的页面。我使用带有背景图像的DIV作为缩略图。当我悬停时，我有一个jQuery脚本，它可以为DIV设置动画，将DIV扩展到图像的全宽。扩展是全方位的，它从中心扩展，带有一些边距和上/左定位

问题是：如果我将鼠标悬停在页面顶部的图像上，图像会展开，但我们只能看到下半部分，因为它在视口外展开

您知道将扩展限制到视口或包含DIV的解决方案吗

以下是我的代码：

$("div.thumbnail").hover(function() {

    $margintop = '-70px';  // half the height of big img minus margins/paddings
    $marginleft = '-115px';  // half the width of big img minus margins/paddings
    $width = '348px';
    $height = '258px';

    $(this).css({'z-index' : '1000'});
    $(this).addClass("hover").stop().animate({
        marginTop: $margintop,
        marginLeft: $marginleft,
        scrollTop: 0,
        width: $width,
        height: $height
    }, 200);

    } , function() {
        $(this).css({'z-index' : '0'});
        $(this).removeClass("hover").stop().animate({
            marginTop: '10px',
            marginLeft: '10px',
            top: '0',
            left: '0',
            width: '100px',
            height: '100px'
        }, 150);
});

---

我会查看包装器div的属性top、left、right和bottom，其中的图像不会显示在外部，查看图像的最大大小位置是否会超过这些坐标，并相应地移动图像，使其超出边界。

这就是我最后要做的：计算偏移量（）.top-缩略图的高度/2+悬停（大）图像的高度/2。。。并检查是否为阴性。。。