Question

在我的页面中，我通过.load（）在div中加载内容动态。在这个加载的div中，我有一个subanvi，我在加载的内容中加载了其他内容。到目前为止，这种方法很完美。

但是在加载之后我想要为包装器的高度设置动画（除了页脚之外全部都在页面上），但是不知道我的功能是如何仅获得第一个显示内容的高度。如何获得新加载内容的高度？

这是我的功能：

$(function(){

        var 
        $subContent = $(".subcontent"),
        $subWrap    = $(".maincontent"),
        $newWrap    = $("#wrapper"),
        subHeight   = 0,
        $el;

        $newWrap.height($newWrap.height());
        subHeight = $newWrap.height() - $subContent.height();

        $("ul.linkbox li a").live('click', function (e) {
    newLink = $(this).attr("href");
        e.preventDefault();

    $(".textbox").find(".subcontent").fadeTo(200,0, function() {

    $(".textbox").load(newLink +  " .subcontent" , function() {

    $(".subcontent").fadeTo(200,1, function() {

        $newWrap.animate({height: subHeight + $subContent.height() + "px"});

    }); 
    }); 
    });   
        });

});

Answer 1

取自你的问题（请不要回答问题）：

我刚刚添加了以下代码，目前正在使用它：

$("#wrapper").css("height","auto");

Answer 2

如果我没有误解你，那么你正试图获得内容的高度，这正是ajax的回应。我知道的第一种方式是$('#objectId').attr('height')。

var heightOfSubContentn = $(".textbox").find(".subcontent").attr("height")

Answer 3

您在任何动画发生之前计算了subHeight

subHeight = $newWrap.height() - $subContent.height();

然后在元素发生一些动画后使用它

 $newWrap.animate({height: subHeight + $subContent.height() + "px"});

这可能会影响您的代码行为。我建议你在需要时再次重新计算subHeight：

$newWrap.animate({height: $newWrap.height() - $subContent.height() + $subContent.height() + "px"});

Answer 4

根据我的经验，可靠地获得高度的唯一方法是创建（在页面加载或在ajax执行时动态执行）一些容器，您通过css定位在用户视图之外：

#stage {
  /* hide the container while maintaining ability to render content */
  visibility: hidden;
  opacity:0;

  /* position out of view of user */
  position: absolute;
  z-index: -1;

  top: -9999em;
  left: -9999em;
}

注意：如果您要加载ajax内容的区域具有设置宽度，请确保将此宽度应用于#stage元素，否则渲染的内容将不是正确的高度。

如果这是一次性用例，那么你当然可以硬编码css中的宽度，或者你可以根据内容区域设置触发ajax加载的click事件的宽度。

以下是您现在如何构建ajax加载的示例：

// We're assuming that the content area is #area
// and that the out-of-view stage is #stage
// .myTrigger can be anything really, probably a link that get's the new content via an href.

$('.myTrigger').click(function(event) {
    var stage = $('#stage'),
         area    = $('#area');

    // get the width of the destination and set this to be the width of your stage container.
    stage.width( area.width() );

    // fire the ajax request
    $.ajax({
       url: 'whatevertheURLis',
       type: 'GET',
       dataType: 'html',
       complete: function (xhr, textStatus) {
          var ajaxContent = $(xhr.responseText);
            var newHeight = stage.append( ajaxContent ).getHeight(); // this will be a number

            // we're now setting the new height onto our content area element and then inject the ajax content.
            // the area.height(newHeight) could equally be an animate statement with the html(ajaxContent) being run in its callback.
            area.height( newHeight ).html( ajaxContent );
       }
    });


});

// helper function to get the height quickly from the stage element.
$.fn.getHeight = function() {
    var stage = $('#stage');
    // store content height.
    var stageHeight = stage.height(); 

    // remove the temporary content.
    stage.children().remove();

    // return the height.
    return stageHeight;
};

希望这有帮助。

如何获取加载ajax的内容的高度？

4 个答案: