jQuery on click animation only happens after first click

Question

I have a very odd problem that i cant seem to crack, I have sliding divs like in y previous question. Now I am trying to implement a auto height feature, so far it works perfectly, the only problem i am facing is that it only animate the height of the wrapper after the first initial click.

So Basically, if you click any link the first time, the height just kind of snaps in place, but after that anything you click animates the height perfectly.

And finally IE8 is a browser i have to unfortunately support, and then when clicked the div expands super high and then just snaps back to where its meant to be.

JSFIDDLE DEMO

And here is the code:

HTML:

<nav>
    <a href="#page-1" class="scrollitem selected">page 1</a>
    <a href="#page-2" class="scrollitem">page 2</a>
    <a href="#page-3" class="scrollitem">page 3</a>
</nav>
<div class="wrapper">

    <div id="page-1" class="page">
        <div class="page-container">
            <h3>page 1</h3>
            <div>Simulated content heigher than 100%</div>
        </div>
    </div>
    <div id="page-2" class="page">
        <div class="page-container">
            <h3>page 2</h3>
            <div>Simulated content heigher than 100%</div>
            <div>Simulated content heigher than 100%</div>
            <div>Simulated content heigher than 100%</div>
            <div>Simulated content heigher than 100%</div>
            <div>Simulated content heigher than 100%</div>
        </div>
    </div>
    <div id="page-3" class="page">
        <div class="page-container">
            <h3>page 3</h3>
            <div>Simulated content heigher than 100%</div>
        </div>
    </div>
</div>

CSS:

html, body {
            height: 100%;
            margin: 0;
            overflow-x:hidden;
            position:relative;
        }
        nav{
            position:absolute;
            top:0; left:0;
            height:30px;
        }
        .wrapper {
            background: #263729;
        }
        .page {
            float:left;
            background: #992213;
            min-height: 100%;
            padding-top: 30px;
        }
        #page-1 {
            background: #0C717A;
        }
        #page-2 {
            background: #009900;
        }
        #page-3 {
            background: #0000FF;
        }
        a {
            color:#FFF;
        }
        a.selected{
            color: red;
        }

JavaScript:

jQuery(document).ready(function () {
    var pages = jQuery('.page'),
        wrapper = jQuery('.wrapper'),
        menuItems = jQuery('a.scrollitem'),
        wrapperWidth = 100 * pages.length,
        slideWidth = 100/pages.length;

    jQuery.each(pages, function (index, value) {
        var page = jQuery(this);
        var pageContainer = jQuery('#'+page.attr('id')+' > .page-container');
        pageContainer.data('originHeight', page.outerHeight());
    });

    wrapper.css({width:wrapperWidth + '%', height:'auto', marginLeft:0});
    pages.width(slideWidth + '%');

    menuItems.click(function(){
        var menuItem = jQuery(this),
            page = jQuery(menuItem.attr('href')),
            pageContainer = jQuery('#'+page.attr('id')+' > .page-container'),
            height = pageContainer.data('originHeight'),
            slideNumber = page.index('.page'),
            margin = slideNumber * -100 + '%';

        menuItems.removeClass('selected');
        menuItem.addClass('selected');

        wrapper.animate({marginLeft: margin, height: height},{
            duration: 1000,
            start: function () {
                page.animate({height:height},1000);
            },
            complete: function () {
                pages.css({height:1,overflow:'hidden'});
                jQuery(this).css({height:'auto'});
                page.css({height:'auto',overflow:''});
            }
        });
        return false;
    });
});

Any Help Would be Fantastic.

Answer 1

Try this Fiddle

I just added this line during the init:

pages.css({height: $(pages[0]).height()});

Update

Just set the height of the inactive pages to 1 as the complete does: Fiddle

if (!$('a.scrollitem[href="' + '#' + page.attr('id') + '"]').hasClass('selected')) 
    page.css({height: 1});

Answer 2

Your js initialisation for wrapper's css seems to be wrong. Replace it with

wrapper.css({width:wrapperWidth + '%', marginLeft:0,height:pages.first().outerHeight()});

That works for me.

Add in your css

.wrapper {
   background: #263729;
   overflow-y: hidden
}

And that works smoothly

Answer 3

Cracked:

http://jsfiddle.net/ugZST/2/

Just add

page.css("height", 1);

before animating the page

jQuery(document).ready(function () {
    var pages = jQuery('.page'),
        wrapper = jQuery('.wrapper'),
        menuItems = jQuery('a.scrollitem'),
        wrapperWidth = 100 * pages.length,
        slideWidth = 100/pages.length;

    jQuery.each(pages, function (index, value) {
        var page = jQuery(this);
        var pageContainer = jQuery('#'+page.attr('id')+' > .page-container');
        pageContainer.data('originHeight', page.outerHeight());
    });

    wrapper.css({width:wrapperWidth + '%', height:'auto', marginLeft:0});
    pages.width(slideWidth + '%');

    menuItems.click(function(){
        var menuItem = jQuery(this),
            page = jQuery(menuItem.attr('href')),
            pageContainer = jQuery('#'+page.attr('id')+' > .page-container'),
            height = pageContainer.data('originHeight'),
            slideNumber = page.index('.page'),
            margin = slideNumber * -100 + '%';

        menuItems.removeClass('selected');
        menuItem.addClass('selected');

        page.css("height", 1);
        wrapper.animate({marginLeft: margin, height: height},{
            duration: 1000,
            start: function () {
                page.animate({height:height},1000);
            },
            complete: function () {
                pages.css({height:1,overflow:'hidden'});
                jQuery(this).css({height:'auto'});
                page.css({height:'auto',overflow:''});
            }
        });
        return false;
    });
});

Answer 4

I think what's happening is that the 2nd div seems to "pop" open when clicking a nav link because the height of this div is not being set explicitly at the outset, and the rendered content in this div simply takes up that amount of height, making the div that tall. Once you explicitly set the height of this div via your animation, that problem no longer exists because the explicit CSS height declaration on the div overrides this issue. For example, notice that when you click "page 3" you see the 2nd div "pop" open, but the then the height animation seems to work on the page 3 div. I think you will need to explicitly set the height on your page-container divs ahead of time, either via CSS, or at the beginning of your click handler (maybe use some overflow-y: hidden?), and potentially fix any issues this may cause in your JS height calculations.