Question

我有这个div，DID动画，但是只要通过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像素。由于你只需要250px来显示所有的东西，看起来根本就没有动画。所以动画是完美的，只要确保类.productRange确实从0px开始，我很确定它会没问题。

如果<li>在DIV中</li>，则jQuery animate（）不起作用

2 个答案: