我只设置了一些我试图水平滑入和滑出的基本面板。我想要做的是在页面加载时隐藏除第一个面板之外的所有内容,然后当单击其他面板的链接时,当前显示的内容将向左滑动以隐藏,然后新内容将滑入页面的中心,依此类推。目前,我所拥有的盒子的定位与我不合作。
演示可以在这里查看:
谢谢!
Firefox 中的一切似乎都运行良好,您唯一缺少的是 z-index 属性适用于 .current 类,该类会将选定的幻灯片列设置在顶部。如果还有其他问题,您能否显示屏幕截图或告诉我们您看到问题的浏览器版本以便我们复制?
你真的需要将元素定位在左边吗?因为如果您可以简单地隐藏它们,那么实现您的效果的代码非常简单:
$(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/