jQuery animate() does not work if a <li> is inside the DIV

Question

I had this div, that DID animate, but as soon as a through a list inside the DIVs, it only makes the DIV visible, and once the animate has gone to the bottom of the height of the lists, then you can see it animate!

And click on the Products option on the top menu.

My jQuery is:

$(function() {
    $('.productRangeActivator').click(function(){
        $('.productRange').animate({'height': '310px'}, 1000);
        $('.productRange').css({'overflow': 'visible'}, 1000);
    }); 
});

And the HTML is:

<div class="productRange">
                <div class="hardware">
                    <span>
                        <h1>Hardware</h1>
                        <ul class="productList">
                            <li><a href="@Href("~/Products/Hardware/hardware_dynabolts-anchors.cshtml")">Dynabolts &amp; Anchors</a></li>
                            <li><a href="@Href("~/Products/Hardware/hardware_wire-rope.cshtml")">Wire Rope</a></li>
                            <li><a href="@Href("~/Products/Hardware/hardware_swage-terminals-balustrading.cshtml")">Swage Terminals &amp; Balustrading</a></li>
                            <li><a href="@Href("~/Products/Hardware/hardware_rigging-screws-turnbuckles.cshtml")">Rigging Screws &amp; Turnbuckles</a></li>
                            <li><a href="@Href("~/Products/Hardware/hardware_eye-bolts-screws.cshtml")">Eye Bolts &amp; Screws</a></li>
                            <li><a href="@Href("~/Products/Hardware/hardware_swaging-cutting-tools.cshtml")">Swaging &amp; Cutting Tools</a></li>
                        </ul>
                    </span>
                </div>
                <div class="stainlessSteel">
                    <span>
                        <h1>Stainless Steel</h1>
                        <ul class="productList">
                            <li><a href="@Href("~/Products/StainlessSteel/stainlesssteel_allthread.cshtml")">Allthread</a></li>
                            <li><a href="@Href("~/Products/StainlessSteel/stainlesssteel_hex-bolts.cshtml")">Hex Bolts</a></li>
                            <li><a href="@Href("~/Products/StainlessSteel/stainlesssteel_hex-setscrews.cshtml")">Hex Setscrews</a></li>
                            <li><a href="@Href("~/Products/StainlessSteel/stainlesssteel_hex-nuts.cshtml")">Hex Nuts</a></li>
                            <li><a href="@Href("~/Products/StainlessSteel/stainlesssteel_flat-washers.cshtml")">Flat Washers</a></li>
                            <li><a href="@Href("~/Products/StainlessSteel/stainlesssteel_socket-screws.cshtml")">Socket Screws</a></li>
                            <li><a href="@Href("~/Products/StainlessSteel/stainlesssteel_screws.cshtml")">Screws</a></li>
                            <li><a href="@Href("~/Products/StainlessSteel/stainlesssteel_cup-head-bolts.cshtml")">Cup Head Bolts</a></li>
                        </ul>
                    </span>
                </div>
                <div class="mildSteel">
                    <span>
                        <h1>Mild Steel</h1>
                        <ul class="productList">
                            <li><a href="@Href("~/Products/MildSteel/mildsteel_allthread.cshtml")">Allthread</a></li>
                            <li><a href="@Href("~/Products/MildSteel/mildsteel_hex-nuts.cshtml")">Hex Nuts</a></li>
                            <li><a href="@Href("~/Products/MildSteel/mildsteel_washers.cshtml")">Washers</a></li>
                            <li><a href="@Href("~/Products/MildSteel/mildsteel_hex-nut-bolt-kits-setscrews.cshtml")">Hex Nut &amp; Bolt Kits, Setscrews</a></li>
                            <li><a href="@Href("~/Products/MildSteel/mildsteel_screws.cshtml")">Screws</a></li>
                            <li><a href="@Href("~/Products/MildSteel/mildsteel_cup-head-bolts-nuts.cshtml")">Cup Head Bolts &amp; Nuts</a></li>
                        </ul>
                    </span>
                </div>
                <div class="highTensile">
                    <span>
                        <h1>High Tensile</h1>
                        <ul class="productList">
                            <li><a href="@Href("~/Products/HighTensile/hightensile_allthread.cshtml")">Allthread</a></li>
                            <li><a href="@Href("~/Products/HighTensile/hightensile_bolt-nut-kits-screws.cshtml")">Bolt &amp; Nut Kits, Screws</a></li>
                            <li><a href="@Href("~/Products/HighTensile/hightensile_hex-nuts-flat-washers.cshtml")">Hex Nuts &amp; Flat Washers</a></li>
                            <li><a href="@Href("~/Products/HighTensile/hightensile_structural-kits.cshtml")">Structural Kits</a></li>
                            <li><a href="@Href("~/Products/HighTensile/hightensile_socket-screws.cshtml")">Socket Screws</a></li>
                        </ul>
                    </span>
                </div>
            </div>

And the CSS:

.productRange {
    width: 100%;
    height: 0;
    overflow: hidden;
}
.hardware {
    padding: 0 0 0 25px;
    height: 250px;
    float: left;
    overflow: hidden;
}
.stainlessSteel {
    padding: 0 0 0 30px;
    height: 250px;
    float: left;
    overflow: hidden;
}
.mildSteel {
    padding-left: 45px;
    height: 250px;
    float: left;
    overflow: hidden;
}
.highTensile {
    padding-left: 35px;
    height: 250px;
    float: left;
    overflow: hidden;
}

Answer 1

I think you need to set the overflow after you div has animated fully:

$(function() {
    $('.productRangeActivator').click(function(){
        $('.productRange').animate({'height': '310px'}, 1000, function(){
            $('.productRange').css('overflow', 'visible');
        });
    }); 
});

I would also suggest you change .productRange's height to 0px not just 0, just to make sure jQuery doesn't glitch.

Answer 2

From what i see, product range as a default height value of 250px. The animation goes but i guess it starts from 250px to 310 pixels. Since you only need 250px to display all the stuffs, it looks like there'S no animation at all. So the anim is perfect, just make sure the class .productRange does start at 0px and I'm pretty sure it'll be fine.