如何使用Jquery滑动元素 [英] How to slide an element using Jquery

问题描述

单击按钮时，就像制作表格一样，我在制作幻灯片时遇到问题.

I'm having an issue on making a slide just like a form when the button is clicked.

我看到了一些例子，但是很复杂.我试图用这个.

I saw some examples but tehy were very complex. I tried to use this one.

$("#btn").click(function() {
$('.box.box1').hide('slide', {direction: 'left'}, 1000);});

这是我的jsfiddle: https://jsfiddle.net/d6x66kb2/3/下面的代码段不起作用

Here's my jsfiddle: https://jsfiddle.net/d6x66kb2/3/ since the code below does not work in the snippet

单击下一个幻灯片按钮时，#1框将向左滑动并消失.应该保留#2，#3，#4和#5框.依此类推.

When next slide button is clicked, the #1 box will slide to the left and disappear. It should be #2, #3, #4 and #5 boxes remained. So on and so fort.

如何将box1代码应用于其余的box.

How can I apply the box1 code to the rest of the boxes.

$("#btn").click(function() {
  $('.box.box1').hide('slide', {
    direction: 'left'
  }, 1000);
});

#test {
  width: 100px;
  min-height: 100px;
}
.container {
  width: 250px;
  height: 250px;
  border: 1px dotted red;
}
.inner-container {
  width: 1250px;
}
.inner-container:after {
  display: block;
  clear: both;
  content: "";
}
.box {
  float: left;
  background: green;
  width: 250px;
  height: 250px;
  opacity: 0.4;
  padding: 104px;
  font-size: 36px;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
}
button {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="inner-container">
    <div class="box box1">
      1
    </div>
    <div class="box box2">
      2
    </div>
    <div class="box box3">
      3
    </div>
    <div class="box box4">
      4
    </div>
    <div class="box box5">
      5
    </div>
  </div>
</div>


<button id="btn">Next Slide</button>

推荐答案

这是一个简单的版本.每次单击都会隐藏第一个可见框，并在单击其他按钮时显示最后一个不可见

Here is a simpler version. Hides the first visible box every click and shows the last not visible when other button is clicked

$("#next").click(function() {
  $(".box:visible").eq(0).hide('slide', {
    direction: 'left'
  }, 1000);
});

$("#previous").click(function() {
  $(".box").not(":visible").last().show('slide', {
    direction: 'left'
  }, 1000);
});

FIDDLE ，因为由于某些原因，stacksnippets今天不喜欢此代码

FIDDLE since stacksnippets does not like this code today for some reason

这篇关于如何使用Jquery滑动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！