Каменная кладка/изотоп JQuery Plugin Filter

Question

Evening All

У меня возникла проблема с фильтром изотопа jquery - фильтрацией.

Я создал тестовую страницу здесь

http://www.csr500.co.uk/websites/v9/preview.html

Теперь мой вопрос, когда я фильтровать с помощью кнопок в правом верхнем углу страницы, то фильтрация работает, но я хотел бы, чтобы на выбранных элементы/элементы исчезают, а страница затем сортируется, т. е. выбранные элементы для упорядочивания, в настоящее время они просто прыгают на место, что мне не нравится.

Проведя некоторые исследования, кажется, что это как-то связано с .masonry ('reload'), однако я не могу решить, где разместить этот код.

Мой изотопный код расположен прямо в нижней части страницы.

Поблагодарив всех заблаговременно, я уверен, что его я немного тускнеет.

Приветствия

Cameron

Answer 1

Добавить эти правила CSS в файл стилей:

.isotope, 
.isotope .isotope-item { 
    /* change duration value to whatever you like */ 
    -webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
     -ms-transition-duration: 0.8s; 
     -o-transition-duration: 0.8s; 
      transition-duration: 0.8s; 
} 

.isotope { 
    -webkit-transition-property: height, width; 
    -moz-transition-property: height, width; 
     -ms-transition-property: height, width; 
     -o-transition-property: height, width; 
      transition-property: height, width; 
} 

.isotope .isotope-item { 
    -webkit-transition-property: -webkit-transform, opacity; 
    -moz-transition-property: -moz-transform, opacity; 
     -ms-transition-property:  -ms-transform, opacity; 
     -o-transition-property:  -o-transform, opacity; 
      transition-property:   transform, opacity; 
} 

/**** disabling Isotope CSS3 transitions ****/ 

.isotope.no-transition, 
.isotope.no-transition .isotope-item, 
.isotope .isotope-item.no-transition { 
    -webkit-transition-duration: 0s; 
    -moz-transition-duration: 0s; 
     -ms-transition-duration: 0s; 
     -o-transition-duration: 0s; 
      transition-duration: 0s; 
} 

Для получения дополнительной информации читайте здесь: http://isotope.metafizzy.co/docs/animating.html