2

代码工作正常。 jsFiddle

唯一的问题是它在滑动时改变了它的宽度（当按下“点击这里”时）。似乎它会削减与#slider 中左边距的 100px 相对应的宽度。

为什么它会“跳跃”以及如何解决？代码有什么问题吗？

里面有什么：一个居中 div 的滑块，它有一个内容和一个粘性页脚。

4

3 回答 3

3

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

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

它保持margin-left在 0px，并使用 jquery 来计算left应该是什么，给定容器的宽度。由于这是动态的，并且可以在调整视口宽度时发生变化，所以我将它放在一个函数调用中，该函数调用在页面加载和窗口调整大小时调用。

于 2012-08-07T12:37:27.630 回答
2

不确定它是否符合您的需求，但您可以简单地设置：

CSS

...

.slider{

    ...

    bottom:0px;

    ...

}

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

JS

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

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

});

这是一个示例 jsFiddle

编辑 1

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

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

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

    $(this).animate({

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

    },500)

 }else{

    $(this).animate({

        top: '0px'

    },500) 

 }

编辑 2

这是另一个不必处理 if(#slider is hidden) 从而只编写一次 .animate 函数的更老套的方法。

基本上 $('#slider').is(':hidden') 是一个布尔值，在 JS 中布尔值相当于 0/1 值，其中 false = 0 和 true = 1，因此您可以编写：

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

$(this).animate({

    top: (1-hid)*(contHeight)

 },500)

其中 contHeight 是 #global-container 高度 - #slide-link 高度。

编辑 3 滚动问题

如果我在评论中遇到了您的问题，那么当您用分配的单词 id 填充内容部分时，id 不会滚动，但内容面板似乎填充了 wole #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

希望我做对了。

于 2012-08-07T12:18:59.420 回答
-1 
.ui-effects-wrapper{  overflow-x: visible !important;  width: 100% !important; }
于 2015-01-23T00:16:04.290 回答