1

我有一个巨大的可滚动区域。在一个部分中，我有一个缩略图网格。单击时，拇指将被克隆并动画到屏幕中心。克隆的图像然后淡出，框变大，然后将相关文章加载到使用 (eq)index 单击的拇指中。

文章加载良好，所以我知道我的目标是正确的，但是因为每篇文章根据其内容具有不同的高度，我需要该框在相应文章出现之前调整其高度。我似乎无法让它工作。我试图将高度传递给一个变量并将高度设置为该值，但它似乎返回 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

任何帮助将不胜感激。提前谢谢了。

4

2 回答 2

1

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

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

于 2012-05-16T17:31:33.110 回答
0

我已经通过使用一个名为actual 的jquery 插件来实现它。直接整理好了。这是链接： http ://dreamerslab.com/blog/en/get-hidden-elements-width-and-height-with-jquery/

非常感谢所有为此提供帮助的人。

于 2012-05-17T08:21:27.353 回答