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 - продолжительность анимации.

Я также хотел бы предложить вам взглянуть на 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 сделать это work

Answer 3

Это не похоже, что это анимация, потому что вы не используете функцию анимации jquery или переключатель слайдов функция, хотя, поскольку вы хотите оживить до двух разных высот, вы не можете использовать слайд-функции, потому что я считаю, что это просто для отображения и скрытия. Может быть, попробовать это:

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