Question

我正在使用.load加载外部文档。我希望加载的内容能够生成动画，但我不知道如何测量加载内容的高度。

我想在外部文档中测量的div是＃box_project2。

该网站位于http://richardhedberg.com/portfolionew/index.html，其中我要定义的高度设置为300px;

$('.thumbs2').click(function() {

var idStr = ("project/"+$(this).attr('id'));

    $('#show2').animate({opacity:0},function(){

    $('#close2').fadeIn(500).css({'display': 'block', 'height': '25px'});

    $('#show2').load(idStr,function(){
                $(this).animate({height:'**I WANT TO DEFINE THIS**', opacity:1}, 500, function(){
                });
$.scrollTo('#gohere',300);

    });

});
    });

$('#close2').click(function(){

    $('#close2').fadeOut(300).animate({});
    $('#show2').animate({height: '0px', opacity:0},500, function(){
    $('#show2').children().remove();    
    });
});








 <div id="close2">
 </div> 

 <div id="show2">
 </div>







#close2 {
position:absolute;
width:25px;
height:24px;
background:url(images/graphics/CloseIcon.png);
right:0px;
top:0px;
z-index: 9999;
display: none;
margin-left:-30px;
}

#show2 {
display: block;
height: 0px;
opacity: 1;
margin-left:-30px;
clear:both;
}

#box_project2 {
display:block;
background:#fff;
text-align: left;
clear:both;
height:100%;
}

新代码

$('.thumbs2').click(function() {

var idStr = ("project/"+$(this).attr('id')) + " #box_project2";

    $('#close2').fadeIn(500).css({'display': 'block', 'height': '25px'});



     $('#show2').load(idStr,function(){
                $(this).slideDown('slow', function() {
                });
                                       $.scrollTo('#gohere',300);


    });

});

Answer 1

如果您想要从0设置动画到元素的高度，可以使用slideDown() http://api.jquery.com/slideDown/

$('#show2').slideUp().fadeOut();

$('#show2').load(idStr, function() {
   $(this).fadeIn().slideDown();
});

Answer 2

idstr.outerHeight(true);

这将返回您引入的对象的高度，true将包括高度计算中的边距。

除此之外，您可能只想使用：

.slideDown();

根据建议计算高度并为您滑动。

p.s气氛很棒

使用.load测量div的高度

2 个答案: