javascript - jQuery 上下切换滑动动画

Question

我在银行列表上创建自定义切换动画，同时单击它将向下切换和向上切换。但是我的代码正在运行，但它不像动画形式那样显示。它只是直接关闭并向下滑动而不会缓慢滑动。请指教:

我希望向下切换为 200 高度并向上切换为 102 高度

j查询:

$(document).ready(function(){
        $(".moreBankingBtn").click(function(){
            $('.bank_listSetUp').toggleClass('bank_listSetTall'); // Will add/remove class on each click
        });
    }); 

HTML:

<div name="bankDisplay2" class="bank_list_main">
                        <ul data-bind="foreach: thirdPayBank" class="bank_list bank_listSetUp">
                                <li data-bind="attr:{'data-key':key, 'data-code':bankcode}, css: memberModel.netbankCssClass($data), click: $root.netBankSelectBank" data-key="工商银行" data-code="ICBC" class="bank_2"><a href="javascript:void(0)" class="bank"></a></li>

                                <li data-bind="attr:{'data-key':key, 'data-code':bankcode}, css: memberModel.netbankCssClass($data), click: $root.netBankSelectBank" data-key="农业银行" data-code="ABC" class="bank_3"><a href="javascript:void(0)" class="bank"></a></li>

</ul>
</div>

CSS:

.bank_listSetUp { 
    height: 102px;  
 }

.bank_listSetTall { 
    height: 200px;
 } 

Answer 1

您可以使用 JQuery UI 并将您的代码更改为类似

            $('.bank_listSetUp').toggleClass('bank_listSetTall',500);

这里500是动画的持续时间。

我还建议您看一下 sideToggle() 函数 http://api.jquery.com/slidetoggle/