滑动#res
div时,我的JQuery幻灯片动画滞后。
有什么建议吗?
JQuery的:
$(document).ready(function(){
$('select.first').change(function(){
$(this).prop('disabled', true);
var codata = $(this).val();
var page = 1;
$.ajax({
type:'POST',
url:'page.php',
dataType:'json',
data:{country:codata, page:page},
success: function(data) {
var result='';
$.each(data, function(i,e) {
result += "<div id='outer'>"+e.sDo+'</div>';
});
$('#res').html(result);
}
}).done(function(){$('#res').slideDown();});
});
});
CSS:
#res {
background-color:gainsboro;
border:1px solid gray;
width:100%;
display:none;
padding-top:10px;
}
#outer {
width:100px;
text-align:center;
border:1px dotted black;
margin:0 0 10px 10px;
display:inline-block;
height:40px;
}
答案 0 :(得分:10)
要在没有跳跃的情况下滑动元素,元素必须具有固定的宽度。这是一个演示演示。 http://jsfiddle.net/WtkUW/1/
原因是jQuery根据元素的宽度和内容计算元素的目标高度。如果它的宽度是100%,jQuery无法准确计算导致跳跃的高度。内容越大,跳跃越大。
答案 1 :(得分:1)
首先,您的page.php发送响应的速度有多快?这可能完全是答案。
其次,在ajax调用完成后,你使用两种竞争方法来完成工作:A).ajax()调用的成功参数,以及B)较新的.done()函数。
一个。将从jQuery 1.8开始弃用(参见:jQuery.ajax handling continue responses: "success:" vs ".done"?)
为什么不将所有内容放在.done()中:
$.ajax({
type:'POST',
url:'page.php',
dataType:'json',
data:{country:codata, page:page}
})
.done( function(data) {
var result='';
$.each(data, function(i,e) {
result += "<div id='outer'>"+e.sDo+'</div>';
});
$('#res').html(result);
$('#res').slideDown();
});
很难知道没有看到执行,但混合这些也可能是意外行为的来源。
答案 2 :(得分:-1)
对于仍然有此问题的任何人,我的问题是我的 padding
设置为 !important
,这可能会覆盖动画效果