滑動表右/左與jQuery

Question

我會得到一個表通過AJAX又名jQuery.getJSON依賴於數據是前後表應該滑動到右側或左側。我是jQuery的絕對初學者。通常我會這樣做正常 JavaScript，但我想要介紹jQuery。

爲了讓兩張桌子滑動，我試着從this answer的代碼，我也試過this one。

但是，所有不滑動。不知道爲什麼。

我的下一次嘗試是將float:left應用到第一個表並設置width，但在特殊情況下，我在填充或邊距方面遇到了一些問題。也許與我使用的模板有關。

但是，我怎樣才能設法將新的內容從右到左滑動到一張桌子上，然後副傘呢？

---

<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

這裏是我的解決方案。請注意，我用的是德語單詞NEU =新和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",""); 
}); 

我也加入這行CSS：

.Status { 
    position:relative; 
} 

Answer 2

什麼這樣的事情？它只是使用CSS和jQuery（沒有jQuery UI效果）。

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

更新使用表而不是股利 - http://jsfiddle.net/u8mkb/4/