Jquery 滑动面板

Question

我只设置了一些基本面板，我试图水平滑入和滑出这些面板。我想要做的是在页面加载时隐藏除第一个面板之外的所有内容，然后当单击其他面板的链接时，当前显示的内容将向左滑动以隐藏，然后新内容将滑入页面的中心，等等。目前，我所拥有的盒子的定位不符合我的要求。

演示可以在这里查看:

http://jsfiddle.net/fE8ks/

谢谢!

Answer 1

你真的需要在元素的左边放置 margin 吗？因为如果简单地隐藏它们对你有用，那么实现你的效果的代码就非常简单:

$(document).ready(function() {
$('#container').css({position:'relative'});
    $("#container div:not(:first)").hide();
    $('.div1').addClass('current');
    $("nav a").click(function() {
        var cls = this.name;
        $('.current').removeClass('current').animate( { width: "hide", paddingLeft: "hide", paddingRight: "hide", marginLeft: "hide", marginRight: "hide" }, 500, function() {
            $('.'+cls).addClass('current').animate( { width: "show", paddingLeft: "show", paddingRight: "show", marginLeft: "show", marginRight: "show" }, 500);
        });
        return false;
    });
});

我也把这个版本放到了你的 Fiddle 中:http://jsfiddle.net/fE8ks/1/