Slide table right/left with jQuery

Go To


I'll get a table via AJAX aka jQuery.getJSON depended on the data are before or after the table should slide to right or to left. I'm an absolut beginner with jQuery. Normaly I would do that with normal javascript but I want to lern jQuery.

For getting the two tables slided I tried the code from this answer and I tried also this one.

But that all doesn't slide. Not sure why.

My next try was to apply float:left to the first table and set the width but in that special case I got some trouble with the padding or margin. Maybe something related with the template I'm using.

However how can I manage to slide new content into a table from right to left and vice vesa?

  <div class="content">
    <script type="text/javascript">
function load(url) {'wait';
    jQuery.getJSON(url, function(data) {'default';
        var html = "";
        var yes=0;
        for(var i=0;i<data['data'].length;i++)

        var nav=document.getElementsByClassName('quick-nav')[0].getElementsByTagName('a');

        html+='<table class="Status" cellspacing="0">';
        html+='<tr><th style="width:120px;">Name</th><th style="width:120px;">Vorname</th><th>zugesagt</th><th style="width:100px;">&nbsp;</th></tr>';

        for(var i=0;i<data['data'].length;i++) {
            var user=data['data'][i];
            var status=user.state?"ja":"nein";
            html+='<tr class="'+(user.default?'':'un')+'regel"><td>'+user.lastname+'</td><td>'+user.firstname+'</td><td><img src="/images/'+status+'.png" alt="" title="'+status+'"/>'+status+'</td><td class="'+status+'">&nbsp;</td></tr>';


<div class="quick-nav">
  <a href="/path/10.04.2012" onclick="load(this.href); return false;">&laquo; Woche früher</a>
  <a href="/path/24.04.2012" onclick="load(this.href); return false;" style="float:right;">Woche später &raquo;</a>
<div class="teilnahme-liste">
  <style type="text/css">
.Status img {
    line-height: 1em;
    margin: -4px 0.4em 0 0;
    vertical-align: middle;
  <table class="Status" cellspacing="0">
      <th style="width:120px;">Name</th>
      <th style="width:120px;">Vorname</th>
      <th style="width:100px;">&nbsp;</th>
    <tr class="regel">
      <td><img src="/images/ja.png" alt="" title="ja"/>ja</td>
      <td class="ja">&nbsp;</td>
    <tr class="regel">
      <td><img src="/images/nein.png" alt="" title="nein"/>nein</td>
      <td class="nein">&nbsp;</td>
    <tr class="unregel">
      <td><img src="/images/ja.png" alt="" title="ja"/>ja</td>
      <td class="ja">&nbsp;</td>
</div><input type="submit" name="op" value="Speichern" class="form-submit" />  </div>

2012-04-03 19:27
by rekire


Here is my solution. Please note that I use the german words neu=new and alt=old:

var neu=jQuery(jQuery(".Status")[1]);
var alt=jQuery(jQuery(".Status")[0]);
alt.css({ opacity: 1, left: '0px'});
neu.css({ opacity: 1, left: '700px'});
// move the element higher

neu.animate({ opacity: 1, left: '0px' }, 400);
alt.animate({ opacity: 0, left: '700px' }, 400, null, function(){

I also added this line css:

.Status {
2012-04-11 10:10
by rekire


What about something like this? It just uses CSS and jQuery (no jQuery UI effects).

$(document).ready(function() {
 $("#btnTest").click(function() {
    $("#state-holder").slideBabySlide(function() {});

$.fn.slideBabySlide = function(callback) {
return this.each(function() {
    var $this = $(this);

    $this.animate({ opacity: 0, left: '-700px' }, 200, function() {
        $(this).css("left", 700);


        $(this).animate({ opacity: 1, left: '0px' }, 300, function() {

            if ($.isFunction(callback)) callback();

​ Update using table instead of div -

2012-04-03 21:06
by Kris Krause
Well there slides a box out. I want that a table slides out and a second one should come to the viewpoint - rekire 2012-04-03 21:18
div, table, span, etc. what's the difference as its still an element moving into view? Here is an update using a table? - Kris Krause 2012-04-03 21:29