Плавная смена элементов

Переключение списков можно сделать через плагин Quicksand.

Официальный сайт и демо плагина: http://razorjack.net/quicksand/

1-ый способ: Динамичный вариант

HTML:

<div id="filter"></div>
<div id="hidden-lists"></div>

<ul id="source">
  <li data-tags="other">Android</li>
  <li data-tags="other">Windows Phone 7</li>
  <li data-tags="mac,other">iOS</li>
  <li data-tags="mac">Mac OS X</li>
  <li data-tags="mac">Mac OS 9</li>
</ul>

JavaScript:

var items = $("#source li"),
    itemsByTags = {};

items.each(function(i){
    var elem = $(this),
        tags = elem.attr('data-tags').split(',');
    
    elem.attr('data-id', i);
    
    $.each(tags, function(key,value){
        value = $.trim(value);
        if(!(value in itemsByTags)){
            itemsByTags[value] = [];
        }
        itemsByTags[value].push(elem);
    });
});

// генерация списков
function createList(text, items) {
    var ul = $('<ul>',{'class':'hidden'});

    $.each(items, function(){ 
        $(this).clone().appendTo(ul);
    });
 
    ul.appendTo('#hidden-lists');
 
    var a = $('<a>',{
        html: text,
        href:'#',
        data: {list:ul}
    }).appendTo('#filter');
}

createList('Показать всё', items);

$.each(itemsByTags,function(k,v){
    createList(k,v);
});

$('#filter a').live('click', function(e){
    e.preventDefault();
    var link = $(this);
 
    link.addClass('active').siblings().removeClass('active');
 
    $('#source').quicksand(link.data('list').find('li'));
});

Пример кода: http://jsfiddle.net/sqfd3qgr/

2-ой способ

Второй способ показывает как работает плагин. Рекомендуется использовать первый вариант.

HTML:

<!-- Кнопки переключения состояния списка -->
<a href="#" id="mac">Mac</a> <a href="#" id="other">Other</a>

<!-- Изначальное состояние списка -->
<ul id="source">
  <li data-id="iphone">iOS</li>
  <li data-id="android">Android</li>
  <li data-id="winmo">Windows Phone 7</li>
</ul>

<!-- копии списков, состояние которого может принимать изначальный список -->
<div style="display: none;">
    <ul id="destination-1" class="hidden">
      <li data-id="macosx">Mac OS X</li>
      <li data-id="macos9">Mac OS 9</li>
      <li data-id="iphone">iOS</li>
    </ul>
    
    <ul id="destination-2" >
      <li data-id="iphone">iOS</li>
      <li data-id="android">Android</li>
      <li data-id="winmo">Windows Phone 7</li>      
    </ul>
</div>

JavaScript:

$("#mac").click(function(e){
    e.preventDefault();
    $('#source').quicksand( $('#destination-1 li') );
});

$("#other").click(function(e){
    e.preventDefault();
    $('#source').quicksand( $('#destination-2 li') );
});

Пример кода: http://jsfiddle.net/jb8s2orz/