jQuery上下切换幻灯片动画

Question

im creating custom toggle animation on the list of bank while onlick it will toggle down and toggle up. However my code is working but it doesn't show up like an animation form. it just close and down directly without sliding slowly. Kindly advise :

I wish to toggle down for 200 height and toggle up for 102 height

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

You can use JQuery UI and change your code to something like

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

Here 500 is the duration of animation.

I would also suggest you to have a look at sideToggle() function http://api.jquery.com/slidetoggle/

Answer 2

i found an solution for this ,

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 } });
        });
});

NOTE : add tweenmax.js to make it work

Answer 3

try slideToggle()

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

Answer 4

It doesn't look like it's animating because you're not using the jquery animate function or the slide toggle function, although since you want to animate to two different heights you can't really use the slide functions, because I believe that's just to display and hide. Maybe try this:

$(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');
}
});


});