Question

当我在div（其高度为0px且overflow：hidden）上使用jquery.load来将内容加载到该div时，我遇到了这个问题，然后快速jquery.css更改它高度为自动，然后使用.height()函数获取其auto高度的值，因此当我为其设置动画时，我知道要设置动画的值。问题是.height()在第一次运行函数时返回0作为值，但第二次返回正确的值。这是我正在使用的代码。

$('#adobe').click(function()
{
    $('#info').animate(
    {
        height:'0px'
    },600,function()
    {
        $('#info').load('projects/adobe.html',animateHeight());
    });
});

function animateHeight()
{
    console.log($('#info'));
    var temp = $('#info');
    var curHeight = temp.height();
    temp.css('height', 'auto');
    var autoHeight = temp.height();
    temp.css('height',curHeight);
    console.log(autoHeight);
    $('#info').animate(
    {
        height:autoHeight
    },600);

    $(window).scrollTo($('#info'),600,{axis:'y'});
}

Answer 1

在调用animateHeight()时，DOM没有时间自行更新;你可以将它添加到你的点击处理程序：

$('#info').load('projects/adobe.html', function() { 
    setTimeout(animateHeight, 0); 
});

这会将执行返回给浏览器，让DOM在依赖它之前更新其尺寸，尤其是当它们设置为auto;时。

设置为auto时，.height（）函数显示错误的值

1 个答案: