Question

我正在尝试在扩展div中加载一个html文档，我想要为扩展设置动画。就像现在一样，我只能设置一个高度，然后动画然后只显示其余部分。

所以我想我希望它加载内容然后设置动画，基本上它说300px它应该是我的html文档的高度（这是不同的，因为它是我的投资组合中的不同项目）。

box_project2 HTML位于单独的html文档中，应定义动画高度。

链接到我的网站，您可以通过点击一些顶级项目来查看实际问题。 http://richardhedberg.com/portfolionew/index.html#

$('.thumbs2').click(function () {
    var idStr = ("project/" + $(this).attr('id'));
    var newHeight = 0;
    $('#show2').animate({ height: '300px', opacity: 0 }, function () {
        $('#workp').fadeIn('fast');
        $.scrollTo('#gohere', 300);

        $('#show2').load(idStr, function () {
            newHeight = $('#box_project2').outerHeight();
            $(this).animate({ height: newHeight }, 300, function () {
                $('#show2').delay(200).animate({ opacity: 1 }, 800);
                $('#close2').css({ 'display': 'block', 'height': '25px' });
            });
        });
    });
});




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


.workp {
background:#fff;
position:relative;
z-index:999;
margin-bottom:30px;


}


#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 {

background:#fff;
text-align: left;
clear:both;
height:100%;


}

Answer 1

你的问题是什么？

首先，你想在加载的回调中进行加载，然后是动画吗？

但是如果你想向用户展示已经加载了多少数据，那么首先你需要编写自己的动画类。然后在每个帧上加载数据，然后在回调中转到下一帧。请注意，在这种情况下，您会动态更改URL，因为您无法控制从一个ajax调用流出的数据。

Answer 2

这个

 $(this).animate({ height: newHeight }

应该附加px单位，并且

 $(this).animate({ height: newHeight + 'px' }

动画文档jQuery的高度

2 个答案: