使用 jQuery 向右/向左滑动表格

Question

我将通过AJAX 又名jQuery.getJSON 获得一个表格，具体取决于表格应该向右还是向左滑动之前或之后的数据。我是 jQuery 的绝对初学者。 Normaly 我会用 normal 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

这样的事情呢？它只使用 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();
        });
    });
});
};

​ 使用 table 而不是 div 更新 - http://jsfiddle.net/u8mkb/4/

Answer 2

这是我的解决方案。请注意，我使用德语单词 neu=new 和 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.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;
}