jquery幻灯片-slideToggle

Posted 2023-05-08

【中文标题】jquery幻灯片-slideToggle

【英文标题】：jquery slide - slideToggle

【发布时间】：2016-04-01 06:28:30

【问题描述】：

我正在处理我页面上的固定页脚 我有三个DIV。左侧的第一个包含一些项目，右侧的另一个 DIV 是一个相对 div。在这些DIV 之间是另一个DIV，它被命名为控制器。当我点击控制器时，左侧DIV 应该像slideToggle() 一样滑到左侧消失，但控制器和右侧DIV 应该坚持向左滑动DIV。如果我在左侧 DIV 不再显示时再次单击控制器，它应该向右滑动，控制器和右侧 DIV 应该具有相同的滑动效果。控制器DIV 和右边的DIV 始终显示！

这是我构建的一个小提琴示例：https://jsfiddle.net/6ydy0o95/

【参考方案1】：

如果我理解正确，slideToggle 并不完全适合这里，因为它会切换显示，而在您的描述中，您需要切换左侧 div 的宽度 - 从 400px 到 0 并返回。 https://jsfiddle.net/6ydy0o95/2/

我发现您的示例中的主要困难是使音频在左侧 div#bar 打开和关闭时拉伸整个休息空间。为此，我在没有任何位置规范的情况下留下#audio - 没有预定义浮动、显示、宽度。 #bar 和 #controller 设置了确定的宽度和 float:left;

#bar 
     width:400px;
     float:left;


#controller 
     float:left;
     width:20px;
 

希望，这会满足您的需求。

【讨论】：

看起来很棒 :) 将在我的网页上对其进行测试，你会知道这是否适合我

【参考方案2】：

您可以制作一些类似这样的动画。我准备了一个 DEMO 。我只为第一个 div 做了...同样，你可以申请任何你想要的地方

$(".bar_item").click(function()
if($(".bar_item").css('margin-left') === "0px")


   $(".bar_item").animate("margin-left": '-=190');

else


$(".bar_item").animate("margin-left": '+=190');



);

JSFiddle

【讨论】：

@Selfproblemmade：这对你有帮助吗？