2011-12-09 125 views
1

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

演示可以在这里签出:

http://jsfiddle.net/fE8ks/

谢谢!

+0

你会发现这个有趣的答案: [横向页面滑动](http://stackoverflow.com/questions/24414642/responsive-horizo​​ntal-page-sliding-navigation/24465646#24465646) –

回答

0

您是否真的需要将具有边缘的元素定位到左侧?因为如果你的作品简单地隐藏起来,这不影响你的代码非常简单:

$(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/

0

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