jQuery animate () не работает, если <li>находится внутри DIV

Question

У меня был этот div, этот DID-анимация, но как только сквозной список внутри DIVs, он только делает DIV видимым, и как только анимация достигла нижней части высоты списков, вы можетепосмотрите его анимацию!

И выберите опцию «Продукты» в верхнем меню.

Мой jQuery:

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

А HTML-код:

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

И 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

Я думаю, вам нужно установить переполнение после того, как вы div полностью анимировали:

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

Я бы также предложил вам изменить высоту .productRange на 0px, а не просто на 0, просто чтобы сделатьуверен, что jQuery не дает сбоя.

Answer 2

Из того, что я вижу, ассортимент продукции в качестве значения высоты по умолчанию составляет 250 пикселей. Анимация идет, но я думаю, она начинается с 250 пикселей до 310 пикселей. Поскольку для отображения всех материалов вам нужно всего 250 пикселей, похоже, что анимации вообще нет. Так что аним идеален, просто убедитесь, что класс .productRange начинается с 0px, и я уверен, что все будет хорошо.