返回的promise
当#select-element
值更改时,我使用以下代码更改.elements
的内容:
$("#select-element").on('change', function () {
var dtype = $("#select-element").val();
$.ajax({
type: 'GET',
url: '/?type='+dtype,
dataType: 'json',
success: function(result) {
for (var r in result) {
var row = '
<div class="row">result[r].name
</div>
';
$('.elements').prepend(row);
}
},
error: function (jqXHR, textStatus) {
},
beforeSend: function(){
$(".elements").slideUp(function() {
$(".elements").children().remove();
});
},
complete: function(){
$(".elements").slideDown();
}
});
});
如果我删除slideUp()
函数,效果会很好。但如果它在那里,则不会显示新内容。问题似乎出在slideDown()
函数上,它不想显示动态生成的元素。
我该怎么修?
问题是slideUp()的持续时间默认为400ms。然后,在400毫秒后,您将移除子项。
假设ajax在200ms内完成(比动画持续时间更短)。。。您的新内容将在调用children().remove()
时插入。
我建议您删除beforeSend
和complete
,并将所有内容组合到success
处理程序内的slideUp
回调中。
$.ajax({
type: 'GET',
url: '/?type=' + dtype,
dataType: 'json',
success: function(result) {
var $elems = $(".elements");
// do slideUp
$elems.slideUp(function() {
// now change content
$elems.empty();
for (var r in result) {
var row = '
<div class="row">result[r].name
</div>
';
$elems.prepend(row);
}
// and display new content
$elems.slideDown();
});
},
error: function(jqXHR, textStatus) {}
});
另一种选择是使用jQuery动画