Question

我目前正在尝试实施＆＃34; flow＆＃34;到我的网站。我想要实现的是根据导航菜单中单击的按钮设置和调出页面内容的动画。导航菜单是唯一一致的元素。菜单有3个按钮Phone，Home和Mail。目前，起始内容是电话页面的内容，但最终我需要将其切换到主页。现在的目标是为当前＆＃34;页面的内容容器设置动画。 out和＆＃34;页面的内容＆＃34;点击了导航按钮。

棘手的部分是这个。当我在电话页面上启动并单击主页按钮时，电话页面容器向左滑动，主页内容从右侧进入。这是期望的效果，因为Phone位于Home的左侧。从家到邮件时，这也适用。但是当我想从邮件转到家里时，我需要将手机的内容向右滑动，然后从左侧进入Home的内容。此外，当从1远端走到对面时，我想滑过它们之间的内容。

更新2

所以修复了＆＃34;我不知道是什么导致了这个＆＃34;只是简单地将此行currBoxX = destBoxX;移出比较之后。我傻到想念那个。我已经实现了我想要的几乎所有的功能，但是我仍然不知道如何在从一个页面到一个页面之间显示中间内容到另一个页面。这不再重要，因为Rick Hitchock向我展示了如何更有效地完成这一切。如果你有点好奇，请查看他的回答。

----

现在它在第一次运行时起作用，并且只有当我从一个菜单按钮转到下一个菜单按钮时才有效。问题是，在第二轮，它开始从错误的地方移动容器，我不知道是什么导致了这个。要在工作中看到这一点，请转到小提琴，首先点击Home，然后再点击Mail再回到Home，然后点击Phone。直到现在，这正是我想要的。现在点击Home，它会从错误的一侧进入。有什么想法吗？

Updated Fiddle

我所做的是存储当前内容容器的值并将其与目标容器的值进行比较。最左边的容器值从1开始，最右边的最高值是3。因此，当我从Phone（1）转到Home（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();
    }

更新结束

我不熟练，我在这里真的很努力，但我在动画中真的迷失了。我知道问题在于我通过左边的属性来动画所有内容，但遗憾的是我不知道如何处理它以获得所需的功能。

因此，我希望听到有关如何完成的任何提示/建议。另外，你是否认为我可以用一个简单而通用的功能来完成这个功能，比如当前的功能，或者我想要的太复杂了，我应该创建更多功能吗？

期待您的回复。

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;
}

根据窗口在导航中的位置动画显示窗口内外的页面内容。 [小提琴里面]

1 个答案:

Fiddle