Question

I have a huge scrollable area. In one section I have a grid of thumbnails. When clicked, the thumb is cloned and animates out to the center of the screen. The cloned image then fades out and the box grows bigger then loads the relevant article to the thumb that was clicked using (eq)index.

The article loads in fine so i know that i am targeting it correctly, but because each article has a different height according to its content, i need the box to resize the height of the corresponding article before it appears. I can’t seem to get this to work. I tried to pass the height into a variable and animate the height to this value, but it seems to return 0 as the box animates its height to 0. If i set a pixel value it’s fine, but that leaves me with a lot of white space at the bottom.\
Code I am using is:

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();

It is then coded to animate to the center and fades out the thumb image which all works fine. Then:

//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

Any help would be greatly appreciated. Many thanks in advance.

Answer 1

I’ve got it working by using a jquery plugin called actual. Sorted it right out. Heres the link:
http://dreamerslab.com/blog/en/get-hidden-elements-width-and-height-with-jquery/

A big thank you to everyone who helped out with this.