Schiebetisch rechts/links mit jQuery

Question

Ich bekomme eine Tabelle über AJAX aka jQuery.getJSON abhängig von den Daten sind vor oder nach der Tabelle sollte nach rechts oder nach links schieben. Ich bin ein absoluter Anfänger mit jQuery. Normalerweise würde ich das mit normalen Javascript tun, aber ich möchte jQuery lernen.

Für die beiden Tabellen rutschte ich den Code aus this answer und ich versuchte auch this one.

Aber das alles rutscht nicht. Nicht sicher warum.

Mein nächster Versuch war, float:left auf die erste Tabelle anzuwenden und die width zu setzen, aber in diesem speziellen Fall hatte ich einige Probleme mit dem Padding oder Rand. Vielleicht etwas mit der Vorlage, die ich verwende.

Wie aber kann ich es schaffen, neue Inhalte in eine Tabelle von rechts nach links und Vice Vesa schieben?

---

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

     var nav=document.getElementsByClassName('quick-nav')[0].getElementsByTagName('a'); 
     nav[0].href=data['navi']['last']; 
     nav[1].href=data['navi']['next']; 

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

     html+='</table>'; 

     document.getElementsByClassName('teilnahme-liste')[0].innerHTML+=html; 
    }); 
} 
</script> 
<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> 
<div class="teilnahme-liste"> 
    <h2>...</h2> 
    <style type="text/css"> 
.Status img { 
    line-height: 1em; 
    margin: -4px 0.4em 0 0; 
    vertical-align: middle; 
} 
</style> 
    <table class="Status" cellspacing="0"> 
    <tr> 
     <th style="width:120px;">Name</th> 
     <th style="width:120px;">Vorname</th> 
     <th>zugesagt</th> 
     <th style="width:100px;">&nbsp;</th> 
    </tr> 
    <tr class="regel"> 
     <td>Mustermann</td> 
     <td>Max</td> 
     <td><img src="/images/ja.png" alt="" title="ja"/>ja</td> 
     <td class="ja">&nbsp;</td> 
    </tr> 
    <tr class="regel"> 
     <td>Müller</td> 
     <td>Lieschen</td> 
     <td><img src="/images/nein.png" alt="" title="nein"/>nein</td> 
     <td class="nein">&nbsp;</td> 
    </tr> 
    <tr class="unregel"> 
     <td>Schmitt</td> 
     <td>Tobias</td> 
     <td><img src="/images/ja.png" alt="" title="ja"/>ja</td> 
     <td class="ja">&nbsp;</td> 
    </tr> 
    </table> 
</div><input type="submit" name="op" value="Speichern" class="form-submit" /> </div> 
</div> 
    </div> 

    </div></div> 

Answer 1

Hier ist meine Lösung. Bitte beachten Sie, dass ich die Deutsch Wörter verwenden neu = neu und alt = alt:

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.css("margin-top",(alt[0].offsetTop-neu[0].offsetTop)+"px"); 

neu.animate({ opacity: 1, left: '0px' }, 400); 
alt.animate({ opacity: 0, left: '700px' }, 400, null, function(){ 
    alt.remove(); 
    neu.css("margin-top",""); 
}); 

ich auch diese Zeile CSS hinzugefügt:

.Status { 
    position:relative; 
} 

Answer 2

Was ist so etwas wie das? Es verwendet nur CSS und jQuery (keine jQuery UI-Effekte).

http://jsfiddle.net/u8mkb/3/

$(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); 

     $("#whatever").show(); 

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

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

-Update statt div mit Tabelle - http://jsfiddle.net/u8mkb/4/