Jquery 当外部div滑到侧面时绑定内部div

我有一个外底和几个内底并排水平排列。内部div表示外部的不同部分（左、中左、中右和右）。覆盖外部div的是一个“视口”或框架，在最终产品中，它将限制可见内容仅限于框架内的内容。实际上，这个视口实际上是前面提到的“outer div”的父div，但我已经完全定位了它，从而将它从页面元素流中去掉

我创建了一个jQuery脚本，它将外部div向左或向右滑动，这取决于单击哪个链接（中间左边DIV中的链接将向右滑动DIV，暴露左边的‘隐藏’内容，反之亦然，中间左边DIV中的链接）。 我想要的是中间div的内容以视口为边界，这样当外部div向左滑动时，中间左侧div的内容不超过视口的右边缘，当外部div向左滑动时，中间右侧div的内容不超过视口的左边缘。大概是这样的：

               ____________________________________________________________
               | l                ||      ml | mr     ||                r |
               |                  ||         |        ||                  |
               |                  ||         |        ||                  |
               |                  ||         |        ||                  |
               |                  ||         |        ||                  |
               |                  ||         |        ||                  |
               |__________________||_________|________||__________________|

                                  ____________________________________________________________
                                  || l             ml || mr                                r |
                                  ||                  ||                                     |
                                  ||                  ||                                     |
                                  ||                  ||                                     |
                                  ||                  ||                                     |
                                  ||                  ||                                     |
                                  ||__________________||_____________________________________|

以下是我到目前为止掌握的一些知识： 我唯一没有弄明白的是如何绑定中间div的内容。有人能告诉我怎么做吗

编辑：我想保留小提琴完成的基本功能。但是，当视口溢出被隐藏时，我希望它看起来像#left div的内容滑入视图，而#mid#u left div的内容滑入视图以腾出空间（而不是像现在那样完全滑出屏幕），反之亦然

编辑：几乎解决了它！这是新的。我的#left和#midleft div工作得很好：我在click事件中添加了第二个动画，它更改了中间div的左边距以适应滑动。然而，同样的技术也必须适用于右侧：我必须在#mid#u右键单击事件中添加第三个动画来更改右div的边距，因为由于div的浮动性质，#mid#u右div将#right div从屏幕上推下一行，可以这么说。不幸的是，这样做的副作用是将我的#mid#u right div渲染到#right div后面，这样我就不能再单击链接将其恢复（我给了#left和#right div一个较暗的背景，这样你就可以很容易地看到发生了什么）。我试着弄乱两个div的z-index，但我认为因为它们是浮动的，z-index将没有效果。关于如何在右侧镜像左侧效果，有什么想法吗？

这里是一个示例，下面是代码。这仅检测div何时击中veiwport窗口并停止动画

   $(document).ready(function() {
    var $viewport = $("#viewport");
    var slideAmount = $viewport.width() / 2;
    var viewportLeft = $viewport.offset().left;
    var viewportRight = $viewport.offset().left + $viewport.width();
    var $slider = $("#side_scroller");

    $('#mid_left a').click(function(event) 
    {
        event.preventDefault();
        collisionLoop = setInterval(collide, 1);
        $slider.animate({left: $(window).width()}); // animate to right side of window
    });

    $('#mid_right a').click(function(event) 
    {
        event.preventDefault(); 
        collisionLoop = setInterval(collide, 1);
        $slider.animate({left: -800}); 
    });

    function collide()
    {
      if($("#mid_left").offset().left + $("#mid_left").width() > viewportRight)
      {
        $slider.stop();
        var correction = $slider.position().left -(($("#mid_left").offset().left +$("#mid_left").width()) - viewportRight);
        $slider.css({left:correction});
        clearInterval(collisionLoop);
      }
      else if($("#mid_right").offset().left < viewportLeft)
      {
        $slider.stop();
        var correction = $slider.position().left +(viewportLeft - ($("#mid_right").offset().left));
        $slider.css({left:correction});
        clearInterval(collisionLoop);
       }
    }
});

$（文档）.ready（函数（）{
变量$viewport=$（“#viewport”）；
var slideAmount=$viewport.width（）/2；
var viewportLeft=$viewport.offset（）.left；
var viewportRight=$viewport.offset（）.left+$viewport.width（）；
变量$slider=$（“#侧#滚动条”）；
$（'mid#u left a'）。单击（函数（事件）
{
event.preventDefault（）；
collisionLoop=setInterval（碰撞，1）；
$slider.animate（{left:$（window.width（）}）；//在窗口右侧设置动画
});
$（'mid#u right a'）。单击（函数（事件）
{
event.preventDefault（）；
collisionLoop=setInterval（碰撞，1）；
$slider.animate（{left:-800}）；
});
函数collide（）
{
if（$（“#中#左”）.offset（）.left+$（“#中#左”）.width（）>viewportRight
{
$slider.stop（）；
var correction=$slider.position（）.left-（$（“#中#左”）.offset（）.left+$（“#中#左”）.width（））-viewportRight；
$slider.css（{left:correction}）；
clearInterval（碰撞循环）；
}
else if（$（“#中#右”）.offset（）.left

谢谢，但这不是我想要的。你的小提琴只是比我提供的那把短了一点。我希望发生的事情与我提供的基本相同，只是当div向右滑动时，#mid#u left div不会滑出视口：它只会滑动到边缘，然后就不能再进一步了（反之亦然，当滑动到左侧时）。在视口溢出隐藏的情况下，“左”div看起来像刚滑入视图，而“中”左则只是移动过来为其留出一些空间。在设置页边距动画之前，请尝试将“中”右div设置为“相对右”。比如$midright.css（{position:“relative”}）@马特，这真管用！为什么会这样？老实说，我不知道发生了什么，我只是在摆弄定位和浮动，它起了作用。