jQueryスライドアニメーションを上下に切り替えます

Question

IMのバンクリストにカスタムトグルアニメーションを作成中にonlickがトグルダウンしてトグルします。しかし、私のコードは動作していますが、アニメーション形式のようには表示されません。それはちょうどゆっくりと滑らずに直接上下に動きます。親切に助言する：

を、私は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はアニメーションの期間です。

私も、私はこのためのソリューション、

jQueryを見つけ、あなたがsideToggle()機能http://api.jquery.com/slidetoggle/

Answer 2

を見てすることをお勧め：

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

jqueryのアニメーション機能やスライドの切り替えを使用していないため、アニメーションが表示されないようですあなたは2つの異なる高さにアニメートしたいので、スライド機能を実際に使用することはできませんが、それは単に表示して隠すことだと思うからです。多分これを試してみてください。

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


}); 

Answer 4

は（slideToggleを試してみてください）

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