Question

代码工作正常。 jsFiddle

唯一的问题是它在幻灯片时更改其宽度（按“点击此处”时）。好像它会削减对应于#slider中左边距的100px的宽度。

为什么它“跳”以及如何修复它？代码有什么问题吗？

其中有一个：居中div的滑块，包含内容和粘性页脚。

Answer 1

问题在于#slider的负余量。由于某种原因，它无法在动画上正确绘制。

这是一个解决方案：http://jsfiddle.net/vyWTL/8/

它将margin-left保持为0px，并使用jquery计算left应该是什么，给定容器的宽度。由于这是动态的，并且可以在调整视口宽度时进行更改，因此我将其放在一个在pageload上调用的函数调用中，并在窗口调整大小。

Answer 2

不确定它是否符合您的需求，但您只需设置：

<强> CSS

...

.slider{

    ...

    bottom:0px;

    ...

}

然后简单地使用jQuery .slideToggle（）来处理打开/关闭状态并且更加流畅：

<强> JS

$("#slide-link").click(function (){

    $('#slider').slideToggle();

});

这是一个sample jsFiddle

编辑1

对此进行了更新，以便＃slide-link也可以使用#slider切换。

基本上我们所做的是根据是否隐藏#slider来设置动画：

if(!$('#slider').is(':hidden')){

    $(this).animate({

        top: $('#global-container').height()-23

    },500)

 }else{

    $(this).animate({

        top: '0px'

    },500) 

 }

JSFIDDLE HERE

编辑2

如果（#slider被隐藏），只需要编写一次.an /动作函数，这就是另一种不必处理的方法。

基本上$（'#strip'）。is（'：hidden'）是一个布尔值，在JS中，布尔值相当于0/1值，其中false = 0且true = 1，因此你可以写：

var hid = $('#slider').is(':hidden')

$(this).animate({

    top: (1-hid)*(contHeight)

 },500)

其中contHeight是#global-container height - ＃slide-link height。

JSFIDDLE HERE

编辑3滚动问题

如果我在评论中出现问题，当你用内容部分填充内容部分时，id不会滚动，但是内容面板似乎填满了#slider并继续滚动页面而无法滚动它

这是因为.content没有固定的高度，这是因为我们知道页脚高70px，而我们只想让.content填满#slider里面留下的所有空间，但这样做.content没有“固定值”，即在其css内部没有高度定义。所以我们需要做的是动态地告诉他，我们用#slide做的方式有多高，所以加入JS

$('.content').height(contHeight-70)

这样你就可以添加：

overflow:hidden; //this is to prevent orizontal scroll
overflow-y:scroll; // this enables vertical scroll

希望我做对了。

JSFIDDLE HERE

Answer 3

.ui-effects-wrapper{  overflow-x: visible !important;  width: 100% !important; }

幻灯片时jQuery幻灯片更改宽度

3 个答案: