javascript - 根据页面内容在导航中的位置在窗口内和窗口外动画页面内容。 [里面的 fiddle ]

Question

我目前正在尝试对我的网站实现“流程”。我想要实现的是根据在导航菜单中单击的按钮对页面内容进行动画处理。导航菜单是唯一一致的元素。该菜单有 3 个按钮电话、主页和邮件。目前开始的内容是电话页面的内容，但最终我需要将其切换到主页。现在的目标是动画化当前“页面”的内容容器和点击导航按钮的“页面”的内容。

棘手的部分是这个。当我从“电话”页面开始并单击“主页”按钮时，“电话”页面容器向左滑动，而“主页”内容从右侧进入。这是预期的效果，因为电话位于主页的左侧。这在从 Home 转到 Mail 时也能正常工作。但是当我想从 Mail 移动到 Home 时，我需要手机的内容向右滑动，而 Home 的内容从左边进入。此外，当从 1 个远端移动到对面时，我想滑过两者之间的内容。

更新 2

因此，解决“我不知道是什么原因造成的”的方法是简单地将此行 currBoxX = destBoxX; 从比较中移到它之后。我愚蠢到错过了。我几乎已经实现了我想要的功能，但我仍然不知道如何在从一页到另一页之间显示中间内容。这不再重要了，因为 Rick Hitchock 已经向我展示了如何更有效地完成整个事情。如果您好奇，请查看他的回答。

----

现在它在第一次运行时就可以工作，而且只有当我从一个菜单按钮转到下一个菜单按钮时才可以。问题是，在第二轮中，它开始从错误的位置移动容器，我不知道是什么原因造成的。 要在工作中看到这一点，请转到 fiddle 并首先单击“主页”，然后单击“邮件”，然后再次单击“主页”，然后单击“电话”。到现在为止，这正是我想要的。现在单击“主页”，它将从错误的一侧进入。有什么想法吗？

Updated Fiddle

我所做的是存储当前内容容器的值并将其与目标容器的值进行比较。容器值从最左边的 1 开始，最右边的最高值为 3。因此，当我从电话 (1) 转到主页 (2) 时，目标值高于当前值，所以我知道按钮位于原始按钮的右侧，我调用向左滑动动画..

在参数中使用当前容器的值调用函数

<div class="nav_btn" onclick="goToBox(1,'#phone_box')">
            Phone</div>
        <div class="nav_btn" onclick="goToBox(2,'#home_box')">
            Home</div>
        <div class="nav_btn" onclick="goToBox(3,'#mail_box')">
            Mail</div>

比较当前容器和目标容器的值

if (destBoxX > currBoxX) {
        currBoxX = destBoxX;
        slideLeft();
    } 
    else {
        slideRight();
    }

更新结束

我不是那么熟练，我真的在这里尽力而为，但我真的迷失在动画中。我知道问题出在我通过 left 属性对所有内容进行动画处理，但不幸的是，我不知道如何解决这个问题以获得所需的功能。

因此，我想听听有关如何完成的任何提示/建议。另外，您甚至认为我可以使用像当前函数这样的简单通用函数来做到这一点，还是我想要的太复杂了，我是否应该创建更多函数？

期待您的回复。

current JSFiddle here

这是函数

function goToBox(boxid){
    $(".currentBox").animate({
        left: '-50%'
    }, 500, function() {
        $(".currentBox").css('left', '150%');
        $(".currentBox").appendTo('#container');     
    });
    $(".currentBox").removeClass("currentBox");
    $(boxid).addClass( "currentBox" );
    $(boxid).animate({
        left: '50%'
    }, 500);  
};

这就是我的称呼

<nav>
    <div id="naw_wrap">
        <div class="nav_btn" onclick="goToBox('#phone_box')">Phone</div>
        <div class="nav_btn" onclick="goToBox('#home_box')">Home</div>
        <div class="nav_btn" onclick="goToBox('#mail_box')">Mail</div>
    </div>
</nav>

Answer 1

无需跟踪所选框，您可以直接滚动到它，如下所示:

function goToBox(boxid){
  $('body').animate({
    scrollLeft: $(boxid).offset().left
  }, 500);
};

您需要对 CSS 进行一些更改。

这会从窗口中删除滚动条:

body {
  ...
  overflow: hidden;
}

您有 3 个框，所有框都是 100% 宽。所以你的容器应该是 300% 宽。由于 overflow: hidden 已添加到正文中，因此容器上不再需要它:

#container {
  ...
  width: 300%;
}

您的盒子是 container 宽度的 1/3，因此它们需要 1/3 的宽度。它们不再需要绝对定位，float: left 使它们并排显示:

.box {
  ...
  width: 33.33%;
  height: 100%;
  float: left;
}

最后，naw_wrap 需要固定定位，以便在主体滚动时保持可见:

#naw_wrap{
  ...
  position: fixed;
}

Fiddle