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

点击时Jquery滑动品牌

1 个答案: