Я не могу заставить .effect работать в моей функции jQuery

Привет, в настоящее время я делаю проект, который требует от меня сортировки и фильтрации продуктов на странице с помощью jQuery. Мой скрипт отлично работает, показывая и скрывая результаты в зависимости от выбора пользователя, однако я хочу, чтобы анимация между переходами работала по-другому. Я уже установил их с помощью fadeOut и fadeIn. Но хотел использовать функцию .effects jQuery. Я не уверен, где я ошибаюсь или могу ли я вообще его использовать. Смотрите мой код ниже. Вот мой полный скрипт, использующий затухание.

 $(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');
        }
    });
}

Может ли кто-нибудь указать, где я ошибаюсь?


person Sam McCausland    schedule 11.01.2013    source источник
comment
Получаете ли вы какие-либо ошибки или какие-либо указания, указывающие на то, где находится проблема?   -  person Gabe    schedule 12.01.2013
comment
Effect() является частью пользовательского интерфейса jQuery. Вы включаете это?   -  person j08691    schedule 12.01.2013


Ответы (1)


  1. Убедитесь, что вы включаете jQuery UI
  2. Попробуйте это: $(this).effect('fold','slow', function(e) { $(this).addClass('hidden'); })

Если вы просто поставите .addClass() сразу после .effect(), это произойдет сразу, а не по завершении эффекта. Поэтому, если ваш класс .hidden на самом деле скрывает вещи с помощью CSS, они сразу же исчезнут, прежде чем вы заметите эффект сгиба. Таким образом, .addClass() вместо этого должен быть обратным вызовом .effect().

person glomad    schedule 11.01.2013
comment
Спасибо! По глупости я не включил пользовательский интерфейс jQuery - person Sam McCausland; 12.01.2013