How to slide an element using Jquery

Question

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>

score 1 · Answer 1 · edited Oct 26 '16 at 06:24

1

Try this Code in Javascript

var count = 1;
$("#btn").click(function() {
    $('.box'+count).hide('slide', {direction: 'left'}, 1000);
    count +=1;
});

Hope this might Help you.

edited Oct 26 '16 at 06:24

mplungjan

169,008
28
173
236

answered Oct 26 '16 at 06:15

Rohit shah

833
4
15

code is yeilding some error... { "message": "ReferenceError: $ is not defined", "filename": "http://stacksnippets.net/js", "lineno": 14, "colno": 1 } – sanjeevprasad Oct 26 '16 at 06:23

mplungjan · Accepted Answer · 2016-10-26T06:46:03.713

1

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 since stacksnippets does not like this code today for some reason

edited Oct 26 '16 at 06:46

answered Oct 26 '16 at 06:20

mplungjan

169,008
28
173
236

this is working also! you're amazing! thanks man! appreciated it a lot! – Kobe Bryan Oct 26 '16 at 06:24
how about if there's a previous button? Should I change .hide() into .show()? @mplungjan – Kobe Bryan Oct 26 '16 at 06:30
man, how can I make the slide smoother without reducing the size of the element? https://jsfiddle.net/3me0cvsa/9/ @mplungjan – Kobe Bryan Oct 26 '16 at 14:53
Can you ask a new question? Post the code and a link to the fiddle. You may need to look into requestanimationframe https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame – mplungjan Oct 26 '16 at 15:31
Or not http://stackoverflow.com/questions/7999680/why-doesnt-jquery-use-requestanimationframe – mplungjan Oct 26 '16 at 15:37
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126747/discussion-between-kobe-bryan-and-mplungjan). – Kobe Bryan Oct 26 '16 at 15:42
Sorry I'm on my phone and in any case do not have a solution to speed up jQuery slide - possibly css transitions might work better – mplungjan Oct 26 '16 at 15:44

How to slide an element using Jquery

2 Answers2

Linked