Question

您好我正在做一个项目，要求我使用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');
        }
    });
}

有人能说出我出错的地方吗？

Answer 1

确保包含jQuery UI
试试这个：$(this).effect('fold','slow', function(e) { $(this).addClass('hidden'); })

如果你只是在.addClass()之后直接链接.effect()，它会立即发生，而不是在效果完成时发生。因此，如果您的.hidden类实际上隐藏了CSS，那么在您注意到折叠效果之前，它们似乎会立即消失。因此，.addClass()应该是对.effect()的回调。

我无法在我的jQuery函数中使用.effect

1 个答案: