显示过滤器后的Jquery幻灯片

Question

我有一个过滤器操作，我希望每个 div 在点击时淡入或淡出；但是，当 div 淡出或淡入时，我希望看到它们滑入到位，而不是跳过。

http://theoaks.turnpostadmin.com/floor-plans/

我可以添加什么来使它像 jquery.easing 或其他东西一样发生

这是我目前所拥有的

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

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

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

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

    return false;
     });
    });

谢谢

杰米

Answer 1

如果您只想让它们上下滑动而不是淡入和淡出，您可以使用内置动画：.slideUp() 和 .slideDown()。

如果你想让它们先淡出然后滑动，你可以使用这个：

$(this).fadeTo('normal', 0).slideUp('normal').addClass('hidden');

您不能使用.fadeOut()，因为当它完成时，它会隐藏使.slideUp() 无法工作的对象。但是，如果你使用.fadeTo()，它只会改变不透明度，然后你可以运行.slideUp()。