jQuery的滑動點擊

Question

品牌我想用來自ASOS一個jQuery效果 - http://www.asos.com/Men/A-To-Z-Of-Brands/Cat/pgehtml.aspx?cid=1361#

的好處是，當你點擊它的幻燈片了一封信給特定行

的問題是有一個字符限制在我的站點的cms數據庫中，因此Asos中使用的表太龐大而無法使用。 你有什麼想法用div來解決這個問題嗎？

感謝您的幫助

朱迪

Answer 1

您可以使用jQuery的slideUp()和slideDown()方法來模擬這種滑動。

假設表格位於'a'處，並且您想要滑動到'c'，您可以使用jQuery來滑動'a'，並且一旦完成，再次使用jQuery來滑動'b'。您必須使用slideUp()的回調函數指定此值。同樣的事情適用於重新顯示元素（即從'c'到'a'），除非您使用slideDown()來取消隱藏元素。下面是一些代碼，我寫爲例：

function hideRecur(startLetterEl, stopLetterEl){ 
    if(startLetterEl === stopLetterEl){ 
     return; 
    } 
    $(startLetterEl).slideUp("slow", 
     function(){ 
      var nextEl = $(startLetterEl).next()[0]; 
      if(nextEl){ 
       hideRecur(nextEl, stopLetterEl); 
      } 
     } 
    ); 
} 
function showRecur(startLetterEl, stopLetterEl){ 
    if(startLetterEl === stopLetterEl){ 
     return; 
    } 
    $(startLetterEl).slideDown("slow", 
     function(){ 
      var prevEl = $(startLetterEl).prev()[0]; 
      if(prevEl){ 
       showRecur(prevEl, stopLetterEl); 
      } 
     } 
    ); 
} 

Here's a jsfiddle demonstrating this