jquery - 让div向左或向右走动，最后从页面上消失

Question

我有一个带有四个按钮菜单栏的网页。每个按钮点击显示不同的 div。所有四个 div 都包含在同一页面中(除了 index.html，我不使用任何第二页)。我希望以这种方式完成这些 div 之间的更改
http://livedemo00.template-help.com/wt_39361/index.html#!/page_about
做。我的方法是:绝对定位到任何 div 并应用

$('#content1').animate({ "left": "+=1500px" }, "slow" ); 

但是，结果不是我想要的，因为 content1 向右走，但水平滚动条仍然可见。我怎样才能以我想要的方式消失#content1 并同时出现#content2？
谢谢

Answer 1

本质上，您需要一个视口(viewport)。视口(viewport)将有一个 overflow: hidden; 属性，并且是屏幕的宽度。视口(viewport)绝对可以是您的 body 元素，但不一定是 - 唯一的规定是移动的元素包含在其中。

你会触发你的移动功能，你的元素会移动到屏幕的一侧，然后以同样的方式引入你的另一个元素，然后将它设置为 position: relative;动画。像这样:

var navClick = function() {
    $viewport = $('#viewport');
    $targetElem = $('#content' + $(this).data('target'));
    $active = $viewport.find('.active');
    $active.animate({'left': '-' + $active.width() + 'px'}, function() {
        $(this).removeClass('active');
    });
    $targetElem.animate({'left': '100px'}, function() {
        $(this).addClass('active');
    });
};

$(function() {
   $('nav span').on('click', navClick); 
});

查看:Fiddle