Question

我在银行列表上创建自定义切换动画，同时点击它将切换并切换。但是我的代码工作正常，但它不像动画形式那样显示。它只是直接上下滑动而不会缓慢滑动。请建议：

我希望切换到200高度并切换到102高度

jQUERY：

$(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/

Answer 2

我为此找到了解决方案，

jQUERY：

$(document).ready(function(){
 var open = false;
        var bankListMain = $("#thirdPayForm .bank_list_main");
        var ul = bankListMain.find("ul");
        var button = bankListMain.find("span");
        button.click(function () {
            open = !open;
            var height;
            if (open) {
                height = "200px";
                button.addClass("bank_hide");
            } else {
                height = "102px";
                button.removeClass("bank_hide");
            }
            TweenMax.to(ul, 0.5, { css: { height: height } });
        });
});

注意：添加tweenmax.js以使其正常工作

Answer 3

尝试slideToggle（）

$(document).ready(function(){
    $(".moreBankingBtn").click(function(){
        $('.bank_listSetUp').slideToggle();
    });
})

Answer 4

它看起来不像是动画，因为你没有使用jquery动画功能或幻灯片切换功能，尽管你想要动画到两个不同的高度你可以＆＃39;我真的使用幻灯片功能，因为我相信只是为了显示和隐藏。也许试试这个：

$(document).ready(function(){
$(".moreBankingBtn").click(function(){

If ($('.bank_list').hasClass('bank_listSetUp')){
    $('.bank_list').animate({
        height: 200,
}, 'slow').promise().done(function(){

 $('.bank_list').removeClass('bank_listSetUp').addClass('bank_listSetTall');

});
}
else {
    $('.bank_list').animate({
        height: 120,
}, 'slow').promise().done(function(){

 $('.bank_list').addClass('bank_listSetUp').removeClass('bank_listSetTall');
}
});


});

jQuery向下和向下切换幻灯片动画

4 个答案: