javascript - 使用按钮和 jQuery 从左或右滑动 DIV

Question

我正在尝试创建一个函数，可以根据您在此过程中的步骤从左或右滑动 div。

这是我的基本结构:

<button type="submit" id="button1">Go to Step 1</button>
<button type="submit" id="button2">Go to Step 2</button>
<button type="submit" id="button3">Go to Step 3</button>

<div id="container">

    <div id="div1">Text 1</div>
    <div id="div2">Text 2</div>
    <div id="div3">Text 3</div>

</div>

使用 jQuery 我有这个，但它不是我想要的:

$('#div1').animate({'width': 0}, 500,function(){ // Slides DIV to left
    $('#div1').css('display','none');
    $('#div1').css('width', 1100); // Set the correct with on DIV again
    $('#div2').fadeIn('slow'); // Fade in new DIV
});

我所追求的是当我在步骤 1 中按下按钮 2(转到步骤 2)时，我希望 div2 从右侧滑入(在容器 div 内)。当我在步骤 3 中按下按钮 1(转到步骤 1)时，我希望 div1 从左侧滑入(在容器 div 内)，而不会在途中看到 div2。我研究了不同的 jQuery slider ，但它们都处理图片。

这是一个示例，它按照我要实现的目标执行某些操作，但没有左/右滑动功能: http://jsfiddle.net/andrewwhitaker/2uV2h/ (来源:How to Slide div's off/on page using jQuery)。如果有不清楚的地方，请提问:) 提前致谢。

JSFIDDLE: https://jsfiddle.net/t5qnw5v5/3/

Answer 1

nkwinder 已经发布了一个带有 jQ​​uery 插件的答案，但我继续将 jQuery 完全排除在外，我不知道你是否喜欢这样，但如果你想要这个解决方案，它就在这里 https://jsfiddle.net/3ydpa3oL/ ，我什至可能修改了你的 jsfiddle，不知道该页面是如何工作的。

我做了什么:

我在 #container 中放置了另一个元素，以便它包含所有 .box 并将其命名为 #slider。

<div id="container">
  <div id="slider"> <!-- NEW ELEMENT NEEDED  -->
    <div id="div1" class="boxes">Text 1</div>
    <div id="div2" class="boxes">Text 2</div>
    <div id="div3" class="boxes">Text 3</div>
  </div>
</div>

.boxes 
{
  width: 50px; // CAUSE I DID NOT WANT TO MESS AROUND TOO MUCH
  height: 20px; // CAUSE I DID NOT WANT TO MESS AROUND TOO MUCH
  font-size: 1em; // CAUSE I DID NOT WANT TO MESS AROUND TOO MUCH
  float: left; // SO THAT THEY SLIDE LEFT AND RIGHT
}

#container
{
  width: 50px; // WINDOW EFFECT
  height: 20px; // WINDOW EFFECT
  display: block;
  overflow: hidden; // WINDOW EFFECT
}

#slider
{
  position: relative; 
  width: 200px; // ENCLOSE .boxes
  transition: left 1s; // NO JQUERY
}

#div1 {
  background-color: green;
}
#div2 {
  background-color: blue;
}
#div3 {
  background-color: orange;
}

所有 .box 必须始终可见，并且容器必须将溢出属性设置为隐藏，以便剪掉其大小之外的所有内容。 #slider 的作用是让 float:left 工作，否则 .boxes 的大小与 #container 一样，并且表现不佳。

现在很容易在 #slider 上使用简单的过渡属性在 div 上制作漂亮的动画，因为我们只需移动这个元素，并且 #container 会剪辑它之外的所有内容，因此我们可以获得滑动 .boxes 的良好效果.

请记住，这种方法会迫使您编写一些额外的代码(我未提供)来调整 #slider 的大小，否则 float:left 将无法正确运行，并且 .boxes 将出现在每个 slider 的顶部其他的，会破坏效果。如果您可以自由使用 CSS3，您可能可以使用 display:flex 来解决这个问题。