我的 JQuery 幻灯片动画在滑动 #res div 时滞后。
有什么建议吗？
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;
}
最佳答案
要在不跳跃的情况下向下滑动元素，该元素必须具有固定的宽度。这里有一个demo来演示。 http://jsfiddle.net/WtkUW/1/
这是因为 jQuery 根据元素的宽度和内容计算元素的目标高度。如果它的宽度是 100%，jQuery 就不能准确计算出高度导致跳转。内容越大，跳跃越大。
关于jQuery slideDown 动画滞后，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11830810/