Question

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

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

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

我可以在jQuery文档中看到如何slideUp和slideDown，但不知道如何向左滑动或向右滑动。任何人都可以帮助我实现这个目标吗？

由于扎克

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

Answer 1

查看http://docs.jquery.com/UI/Effects/Slide - 使用show / hide方法可以传递更多参数，例如方向。 E.g。

$('#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中，但我认为您可以下载其中包含所需效果的自定义构建。

Answer 2

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

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

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

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

最好的运气！