砌体/同位素jquery插件筛选器

Question

傍晚所有

我有一个同位素jquery插件 - 过滤问题。

我已经在这里创造一个示例页面

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

现在我的问题是，当我过滤使用页面右上角的按钮，然后将过滤的工作原理，但我想选择的非项目/元素淡出和页面自行排序，即选择的项目重新排序自己，目前他们只是跳到位，我不喜欢。

做了一些研究后，它看起来好像与.masonry（'reload'）有关，但我无法确定将代码放在哪里。

我的同位素代码位于页面的底部。

提前感谢大家，我相信它会让我有点朦胧。

干杯

卡梅伦

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