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滑块，但它们都处理图片。

以下是一个示例，其中包含了我要实现的内容，但没有左/右幻灯片功能：http://jsfiddle.net/andrewwhitaker/2uV2h/（来源：How to Slide div's off/on page using jQuery）。如果有什么不清楚的地方请提问:)谢谢你提前。

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

Answer 1

我建议使用http://jquery.malsup.com/cycle2/demo/non-image.php 您不仅可以滑动div而不仅仅是图像。您不必使用自定义代码实现滑动。

Answer 2

nkwinder已经发布了一个jQuery插件的答案，但我继续完全没有问题，我不知道你是否更喜欢它，但是如果你想要那个解决方案，它就在这里{{3}我甚至可能修改了你的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都必须始终可见，并且容器HAS TO将溢出属性设置为隐藏，以便剪切其大小之外的所有内容。 #slider在那里使float：left work，否则.box的大小为#container并且表现不佳。

现在很容易在div上有一个很好的动画，在#slider上有一个简单的过渡属性，因为我们只是移动这个元素并且因为#container剪辑了它之外的所有内容，我们得到一个很好的滑动效果.boxes

请记住，这种方法会强制您编写一些额外的代码（我不提供）来调整#slider的大小，否则float：left将无法正常运行，而.box会出现在每个代码的顶部其他，这会破坏效果。你可以使用display：flex来修复它，如果你可以自由使用CSS3。

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

2 个答案: