如果，则 jQuery animate() 不起作用。位于 DIV 内

Question

我有这个 div，它确实有动画，但是一旦通过 DIV 内的列表，它只会使 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

据我所知，产品范围的默认高度值为 250px。动画开始播放，但我猜它从 250 像素开始到 310 像素。由于只需要 250 像素即可显示所有内容，因此看起来根本没有动画。所以动画是完美的，只要确保类 .productRange 确实从 0px 开始，我很确定它会没问题。