Не мога да накарам .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