0

ASOSのjQueryエフェクトを使用したい-http://www.asos.com/Men/A-To-Z-Of-Brands/Cat/pgehtml.aspx?cid=1361 #

良い点は、文字をクリックすると、特定の行にスライドすることです。

問題は、私のサイトのCMSデータベースに文字数制限があるため、ASOSで使用されるテーブルが大きすぎて使用できないことです。divでこれを回避する方法について何か考えがありますか？

4

1 に答える 1

1

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

これを示すjsfiddleがあります

于 2011-08-01T23:23:28.500 に答える