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.