jQuery幻灯片在滑动时改变宽度

Posted 2023-03-13

【中文标题】jQuery幻灯片在滑动时改变宽度

【英文标题】：jQuery slide changes the width when slides

【发布时间】：2012-08-07 12:03:53

【问题描述】：

代码运行良好。 jsFiddle

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

为什么会“跳”，如何解决？代码有什么问题吗？

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

【参考方案1】：

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

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

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

【讨论】：

抱歉，我不能同时选择这两个 asnwers。选择另一个是因为我更喜欢该代码（似乎在页面加载后完成的样式移动较少）。

【参考方案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

这是另一种更老套的方法，无需处理 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 高度。

JSFIDDLE HERE

EDIT 3 Scroll 问题

如果我在评论中遇到了您的问题，当您用分配的单词 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

希望我做对了。

JSFIDDLE HERE

【讨论】：

我认为您需要的是 #slide-link 栏也可以切换...正在努力！

这里还有一个更 hacky 但代码计划的解决方案，基于 javascript 将 false 解释为 0 并将 true 解释为 1 的事实，因此您可以使用 #slider 自动切换将 #slide-link 顶部设置为动画#container.height()-23 *(1 - #slider.is(':hidden')) 像这样：jsfiddle.net/vyWTL/12

你成就了我的一天。谢谢。

我刚刚恢复了@jsfiddle.net/vyWTL/12，如果内容有很多文本，则无法向下滚动（因为#slider position:absolute 无法滚动。我应该打开另一个主题吗？这个问题分开？

你的意思是这样吗？ jsfiddle.net/vyWTL/14 ...请定义“不能向下滚动”

【参考方案3】：

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

【讨论】：

这个答案出现在低质量审查队列中，大概是因为您没有解释代码。如果您确实解释了它（在您的回答中），您更有可能获得更多的支持——提问者更有可能学到一些东西！