JQuery Слайд после фильтра показа

Question

У меня есть действие фильтра, которое работает так, как я хочу, чтобы каждый div исчезал или выходил по клику; однако, когда divs исчезают или появляются, вместо того, чтобы просто прыгать, я бы хотел, чтобы они скользнули на место.

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

Если вы просто хотите, чтобы они скользили вверх и вниз, а не fadeIn и fadeOut, вы можете использовать встроенные анимации: .slideUp() и .slideDown().

Если вы хотите, чтобы первый FADEOUT, а затем slideUp, вы могли бы использовать это:

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

Вы не можете использовать .fadeOut(), потому что, когда это сделано, он скрывает объект, который будет держать .slideUp() от работы. Но, если вы используете .fadeTo(), он просто меняет непрозрачность, и вы можете запустить .slideUp().