0

こんにちは、私は現在、jQuery を使用してページ上の製品をソートおよびフィルタリングする必要があるプロジェクトを行っています。ユーザーの選択に基づいてスクリプトを完全に表示および非表示にしていますが、トランジション間のアニメーションを別の方法で実行したいと考えています。私はそれらをすでにfadeOutとfadeInを使って設定しています。しかし、jQuery の .effects 機能を利用したいと考えていました。どこが間違っているのか、それを使用できるかどうかさえわかりません。以下の私のコードを参照してください。フェードを使用した完全なスクリプトを次に示します。

 $(document).ready(function() {
$('ul#filter a').click(function() {
    $(this).css('outline','none');
    $('ul#filter .current').removeClass('current');
    $(this).parent().addClass('current');

    var filterVal = $(this).text().toLowerCase().replace(' ','-');

    if(filterVal == 'all') {
        $('ul#selection li.hidden').fadeIn('slow').removeClass('hidden');
    } else {

        $('ul#selection li').each(function() {
            if(!$(this).hasClass(filterVal)) {
                $(this).fadeOut('slow').addClass('hidden');
            } else {
                $(this).fadeIn('slow').removeClass('hidden');
            }
        });
    }

    return false;
});

});

以下は、フォールドで効果を使用する私の試みです。

 $('ul#selection li').each(function() {
        if(!$(this).hasClass(filterVal)) {
            $(this).effect('fold','slow').addClass('hidden');
        } else {
            $(this).fadeIn('slow').removeClass('hidden');
        }
    });
}

誰かが私が間違っているところを指摘できますか?

4

1 に答える 1

0
  1. jQueryUIが含まれていることを確認してください
  2. これを試して：$(this).effect('fold','slow', function(e) { $(this).addClass('hidden'); })

の直後にチェーン.addClass()する.effect()と、エフェクトが完了したときではなく、すぐに発生します。したがって、.hiddenクラスが実際にCSSで物事を非表示にすると、折り畳み効果に気付く前に、それらはすぐに消えるように見えます。したがって、代わりに.addClass()へのコールバックである必要があります.effect()。

于 2013-01-11T22:15:05.547 に答える