Question

我已经设置了一些基本面板，我试图水平滑入和滑出。我正在尝试隐藏除页面加载时第一个面板之外的所有内容，然后当单击其他面板的链接时，当前显示的内容将向左滑动以隐藏，然后新内容将滑入页面的中心，依此类推。目前，我所拥有的盒子的位置并没有与我合作。

可以在这里查看演示：

http://jsfiddle.net/fE8ks/

谢谢！

Answer 1

在Firefox中似乎一切正常，你唯一缺少的是z-index属性适用于.current类，它将选定的幻灯片列设置在顶部。如果还有其他问题，那么您可以显示屏幕截图或告诉我们您看到问题的浏览器版本，以便我们可以复制吗？

Answer 2

你真的需要在左边放置带边距的元素吗？因为如果你只是隐藏它们，那么实现你效果的代码非常简单：

$(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;
    });
});

我也把这个版本放到了你的小提琴：http://jsfiddle.net/fE8ks/1/

Jquery滑动面板

2 个答案: