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

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

$('#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'}); 
}

来源

2013-02-24 Nolski

它与浏览器重绘机制有关，如果您将高度发送到'auto'并尝试获取高度，则在这两者之间浏览器可能不会重新绘制UI以重新计算项目的新高度。 – 2013-02-24 06:02:27

在调用animateHeight()时，DOM没有时间更新自己;你可以添加到您的单击处理：

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

这使执行返回给浏览器，让DOM依靠它，尤其是当它们设置为auto;之前更新它的尺寸。

来源

2013-02-24 06:02:43

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

回答

相关问题