Kobe Bryan Kobe Bryan - 2 years ago 149
jQuery Question

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);});

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

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.

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">
<div class="box box2">
<div class="box box3">
<div class="box box4">
<div class="box box5">

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

Answer Source

Here is a simpler version. Hides the first visible box every click

 $("#btn").click(function() {
   $('.box:visible').eq(0).hide('slide', {direction: 'left'}, 1000);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download