jquery - Is it possible to move and slide table row to the left? -

i have simple html table , want move animate paging action. example, each page loads 3 table rows supposed replace current onscreen table rows. i'd animate first 3 rows slide out left, , next 3 ones slide in right.

i can't seem come solution using html table tag, i'd avoid styled lists or divs if possible.

here's example, active class should visible on first page, when click next button, first 3 rows should slide out left, , second 3 should slide in right. https://jsfiddle.net/ba0alker/

<table>   <tr class="active">     <td>one</td>   </tr>   <tr class="active">     <td>two</td>   </tr>   <tr class="active">     <td>three</td>   </tr>   <tr>     <td>four</td>   </tr>   <tr>     <td>five</td>   </tr>   <tr>     <td>six</td>   </tr> </table> <button id="prev">previous</button> <button id="next">next</button> 

here have dirty , quick aproximation. have tweak bit think start point.

first, need have tables on html, , have 1 active class. 1 visible. other tables, set display:none them hidden.

then, in js, change class active next element. added if check next element table, if isn't first table gets active class.

$("document").ready(function() {      $("#the_button").click(function() {  var next = $(".tables.active").last().next();    if (next.get(0).tagname != 'table') {    next = $(".tables").eq(0)  }    $(".tables.active").removeclass("active");  next.addclass("active");  next.next().addclass("active");  next.next().next().addclass("active");      $(".tables").fadeout(300);  $(".tables.active").delay(300).fadein(300);      });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table class="tables active">    <tr>  <th>firstname</th>  <th>lastname</th>  <th>age</th>    </tr>    <tr>  <td>jill</td>  <td>smith</td>  <td>50</td>    </tr>    <tr>  <td>eve</td>  <td>jackson</td>  <td>94</td>    </tr>  </table>  <table class="tables active">    <tr>  <th>firstname</th>  <th>lastname</th>  <th>age</th>    </tr>    <tr>  <td>jill</td>  <td>smith</td>  <td>50</td>    </tr>    <tr>  <td>eve</td>  <td>jackson</td>  <td>94</td>    </tr>  </table>  <table class="tables active">    <tr>  <th>firstname</th>  <th>lastname</th>  <th>age</th>    </tr>    <tr>  <td>jill</td>  <td>smith</td>  <td>50</td>    </tr>    <tr>  <td>eve</td>  <td>jackson</td>  <td>94</td>    </tr>  </table>    <table class="tables" style="display:none">    <tr>  <th>foo</th>  <th>bar</th>  <th>foobar</th>    </tr>    <tr>  <td>foo</td>  <td>bar</td>  <td>foobar</td>    </tr>    <tr>  <td>var</td>  <td>foo</td>  <td>foovar</td>    </tr>  </table>  <table class="tables" style="display:none">    <tr>  <th>foo</th>  <th>bar</th>  <th>foobar</th>    </tr>    <tr>  <td>foo</td>  <td>bar</td>  <td>foobar</td>    </tr>    <tr>  <td>var</td>  <td>foo</td>  <td>foovar</td>    </tr>  </table>  <table class="tables" style="display:none">    <tr>  <th>foo</th>  <th>bar</th>  <th>foobar</th>    </tr>    <tr>  <td>foo</td>  <td>bar</td>  <td>foobar</td>    </tr>    <tr>  <td>var</td>  <td>foo</td>  <td>foovar</td>    </tr>  </table>  <button id="the_button">    next table  </button>