animate to float: визуализация изменения положения

Question

У меня есть список элементов, которые могут отображаться как по вертикали, так и по горизонтали:

http://jsbin.com/olefi3/2

В настоящее время переключение между этими двумя режимами создает довольно неприятный пользовательский опыт, поскольку элементыперемещаются довольно внезапно (поскольку классы CSS применяются / удаляются).Очень помогло бы постепенное перемещение каждого элемента на новую позицию, чтобы пользователям было проще сохранять свою ориентацию.

Я знаю, что метод animate в jQuery не работает для плавать .Хотя я могу представить решение, оно кажется довольно сложным:

• создать невидимого клона каждого элемента
• применить желаемый стиль (вертикальный / горизонтальный)
• записьновая позиция клонов
• удалить клонов
• анимировать фактические элементы в записанные позиции
• применить желаемый стиль к фактическим элементам
• удалить встроенныйстили из анимации

Прежде чем я начну изобретать велосипед, существует ли что-нибудь подобное?

Answer 1

Плагин, который вам, вероятно, понравится - это изотоп. Isotope будет переупорядочивать блоки контента с помощью CSS3 и переходить к jquery-animate. Проверьте это в: изотоп

Answer 2

Для начала вам нужно включить библиотеку jqueryui сразу после включения библиотеки jquery для .toggleClass() вызова animate вообще

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>

Это приближает вас к тому, что вы ищете.

Удачи