Question

我有一个巨大的可滚动区域。在一个部分中，我有一个缩略图网格。单击时，将克隆拇指并将其设置为屏幕中心。然后克隆的图像淡出，盒子变大，然后将相关的文章加载到使用（eq）索引点击的拇指。

该文章加载正常，所以我知道我正确地定位它，但因为每篇文章根据其内容具有不同的高度，我需要该框在它出现之前调整相应文章的高度。我似乎无法让这个工作。我试图将高度传递给变量并将高度设置为此值的动画，但它似乎返回0，因为框将其高度设置为0.如果我设置像素值它很好，但这让我有很多白色底部的空间。我正在使用的代码是：

var index = newsover.index($(this)); //cycle through read more links
    var offset = $(this).offset();  //Get the thumb position to animate from
    var animFinished = false;  //Create boolean to check when ani finishes
    $('#news-articles .news-article').hide().eq(index).show(); // show the article for the corresponding link and hide the others
    var article = $('#news-articles .news-article').eq(index);
    var articleClone = article.clone(true);  // clone the article for the corresponding link
    var articleHeight = article.height();

然后将其编码为动画到中心并淡出拇指图像，这一切都正常。然后：

//expand the box further from the center
    expandFurther = function() {
        expandedItem.animate({
            width: 875,
            height: articleHeight,
            marginTop: -articleHeight/2,
            marginLeft: -875/2,
            }, {
                duration: DDBR.constant.ITEM_ANIMATION_SPEED,
                easing: DDBR.constant.ITEM_ANIMATION_EASING,
                queue: false,
                complete: function() {
                    animFinished = true;
                    if (animFinished) {
                    loadContent();
                    }
                }
            })              
        }; //END expandFurther function

非常感谢任何帮助。非常感谢提前。

Answer 1

我无法完全从你的描述中看出来，但听起来你的高度为零，因为在动画完成之前你实际上并没有加载文章内容，所以当然你正在寻找容器at的高度为零 - 它是空的。

要为正确的高度设置动画，您需要以某种方式加载文章内容 - 在实际容器内或在（可能不可见的）虚拟容器内。

Answer 2

我通过使用名为actual的jquery插件来实现它。把它排好了。继承人链接： http://dreamerslab.com/blog/en/get-hidden-elements-width-and-height-with-jquery/

非常感谢所有帮助过这个的人。

如何将此详细视图设置为动画到正确的高度？

2 个答案: