Kobe Bryan Kobe Bryan - 1 month ago 17
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">
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>




Answer

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

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