jQuery切換幻燈片動畫向下和向上

即時通訊創建自定義切換動畫的銀行列表，而onlick它會切換下來並切換。但是，我的代碼正在工作，但它不像動畫形式顯示。它只是直接關閉而不會緩慢滑動。請告知：jQuery切換幻燈片動畫向下和向上

我想切換下來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; 
}

來源

2016-10-03 Morgan Ng

你有你的動畫類 – maddygoround

@maddygoround喜馬迪，讓我看看怎樣的方式來製作動畫？即時通訊新的。謝謝你 –

您可以使用JQuery UI並將您的代碼更改爲類似於

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

這裏500是動畫的持續時間。

我也建議你看看sideToggle()功能http://api.jquery.com/slidetoggle/

來源

2016-10-03 02:16:27 maddygoround

嗨馬迪，我認爲這不是我嘗試在它上面實現這個代碼的好方案，似乎沒有什麼不同 –

我發現這一個解決方案，

的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使它工作

來源

2016-10-03 02:40:15

-1

它看起來不像它的動畫，因爲你沒有使用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'); 
} 
}); 


});

來源

2016-10-03 02:45:56

嘗試的slideToggle（）

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

來源

2016-10-03 02:49:10

jQuery切換幻燈片動畫向下和向上

回答

相關問題