0

嗨，我目前正在做一个项目，需要我使用 jQuery 对页面上的产品进行排序和过滤。我的脚本可以根据用户选择完美地显示和隐藏结果，但是我希望转换之间的动画以不同的方式运行。我已经使用淡出和淡入设置了它们。但是想利用 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. 确保包含 jQuery UI
  2. 试试这个：$(this).effect('fold','slow', function(e) { $(this).addClass('hidden'); })

如果您只是.addClass()直接在 之后链接.effect()，它将立即发生，而不是在效果完成时发生。因此，如果你的.hidden类实际上用 CSS 隐藏了一些东西，它们似乎会在你注意到折叠效果之前立即消失。所以.addClass()应该是一个回调来.effect()代替。

于 2013-01-11T22:15:05.547 回答