我有一个div,它正在从ajax调用中接收内容。现在,我只是在ajax回调处理程序中执行以下操作:
function searchCallback(html) { $("#divSearchResults").html(html); }
这会使内容突然出现在页面上,很突兀。有没有办法使div优雅地调整大小,就像.slideToggle()方法一样?
确保它是隐藏的,然后添加内容并将其滑入。
$("#divSearchResults").hide();
$("#divSearchResults").html(html);
$("#divSearchResults").slideDown();
或者您可以使用淡入效果:
$("#divSearchResults").fadeIn();
不确定这个方法是否可行,但值得一试:
当然,你可以尝试这个:
function searchCallback(html) {
var html_hidden = $('<div style="display:none;" class="hidden_insert">'+html+'</div>');
$('#divSearchResults').html(html);
$('#divSearchResults .hidden_insert').slideDown('medium');
}
虽然不是最美观的东西,但确实可以工作。 你可以通过为类“hidden_insert”创建CSS样式来美化它,使具有该类的元素默认隐藏。 另外,在后端发送此日期的地方,您可以在那里进行包装,而不是在JavaScript中进行包装。 这样,脚本就可以简化为:
function searchCallback(html) {
$('#divSearchResults').html(html).find('.hidden_insert').slideDown('medium');
}
我没有测试过它们,但它们应该可以工作。
$('#divid').slideDown(); $('#divid').css('display','block');
。但是如何将其向上滑动?似乎有一个函数slideUp()
,但在我的代码中没有效果:$('#divid').css('display','none'); $('#divid').slideUp();
- ulkasdisplay:block / display:none
,函数slideDown(); / slideUp()
会自己完成。 - ulkas