滑动表右/左与jQuery
我会得到一个表通过AJAX
又名jQuery.getJSON
依赖于数据是前后表应该滑动到右侧或左侧。我是jQuery的绝对初学者。通常我会这样做正常 JavaScript,但我想要介绍jQuery。滑动表右/左与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;"> </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+'"> </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;">« Woche früher</a>
<a href="/path/24.04.2012" onclick="load(this.href); return false;" style="float:right;">Woche später »</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;"> </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"> </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"> </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"> </td>
</tr>
</table>
</div><input type="submit" name="op" value="Speichern" class="form-submit" /> </div>
</div>
</div>
</div></div>
这里是我的解决方案。请注意,我用的是德语单词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;
}
什么这样的事情?它只是使用CSS和jQuery(没有jQuery UI效果)。
$(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/
那么滑出一个框。我想要一张桌子滑出来,另一张桌子应该来到这个角度。 – rekire 2012-04-03 21:18:56
div,table,span等等,它仍然是一个元素进入视图的区别是什么?这是使用表的更新? http://jsfiddle.net/u8mkb/4/ – 2012-04-03 21:29:37
能否请您发布的HTML标记和jQuery代码,你有这么远。 – 2012-04-03 19:30:05
给我们HTML ...请 – 2012-04-03 19:36:03
@RoryMcCrossan我已更新我的问题。 – rekire 2012-04-03 21:02:03