jQuery - 滑动文本面板效果答案

【问题标题】：jQuery - Sliding Text Panels EffectjQuery - 滑动文本面板效果
【发布时间】：2011-07-07 21:26:38
【问题描述】：

我在 HTML/CSS 中有以下代码：http://jsfiddle.net/XmRNh/

如您所见，有一个“关于”容器，里面有三个“幻灯片”。第一张幻灯片始终打开。第二张和第三张幻灯片的初始状态是屏幕外隐藏。

我想使用 jQuery 在单击相应按钮时将第二张和第三张幻灯片“滑动”到位，然后在单击相应关闭按钮时将其滑出屏幕。

我可以在 jQuery 文档中看到如何向上滑动和向下滑动，但不能看到如何向左滑动或向右滑动。谁能帮我完成这个？

谢谢扎克

编辑：是否可以在页面加载时将第一张幻灯片从屏幕上隐藏/隐藏，并在页面加载后立即从左侧滑入？

【问题讨论】：

【解决方案1】：

查看http://docs.jquery.com/UI/Effects/Slide - 使用显示/隐藏方法，您可以传递更多参数，例如方向。例如

$('#about-slide-2').show("slide", { direction: "left" }, 1000);

要在加载时显示第一个面板，您可以像这样在 html 中将其显示样式设置为 none

style='display:none'

然后使用这个javascript

$(function() {
  $('#about-slide-1').show("slide", { direction: "left" }, 1000);
});

请注意，这些效果包含在 jQueryUI 中，而不是标准 jQuery，但我认为您可以下载它的自定义构建，其中仅包含您需要的效果。

【讨论】：

【解决方案2】：

我知道你需要在 jQuery 中使用 .animate() 函数

几年前的这个教程给出了一个使用 div 宽度滑动的例子。

$(document).ready(function() {
  $('#slidewidth button').click(function() {
    $(this).next().animate({width: 'toggle'});
  });
});

教程： http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

我可能错了，但我相信这是正确的做法。

祝你好运！

【讨论】：