我有一组div,每个div对应一组类别.当我点击一个过滤器时,这将改变div的类,并根据这些类别使它们变得易碎或隐藏.我控制div如何淡入/淡出并且它们缓慢而漂亮但每次div消失时,保持不变的那些突然移动以填充被隐藏的空间留下的空白空间.
如何在其他人消失并留下空白空间之后平滑未隐藏的div的移动？
//Before this goes a long function that decides wich divs will get their class changed$('#work-container > div[class*=visible]').fadeIn('slow','swing');$('#work-container > div[class*=hidden]').fadeOut('slow','swing');@H_403_9@
编辑：http://jsfiddle.net/Ccswn/3/小提琴的东西
最佳答案
我建议使用animate()代替fadeOut()：
$('div').click( function() { $(this).animate({ 'height': 0,'opacity': 0 },750,function() { $(this).remove(); }); });@H_403_9@
编辑以合并jQuery / CSS解决方案：
更改.item的CSS以包含以下内容：
.item{ /* other css removed for brevity */ -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -o-transition: all 1s linear; -ms-transition: all 1s linear; transition: all 1s linear;}@H_403_9@
并将a.hidden更改为以下内容：
.hidden { width: 0; /* reset everything that might affect the size/visibility */ height: 0; padding: 0; margin: 0; opacity: 0; -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -o-transition: all 1s linear; -ms-transition: all 1s linear; transition: all 1s linear;}@H_403_9@
使用以下jQuery：
// content animate$('#work-container > div[class*=hidden]').addClass('hidden');return false;@H_403_9@
然后一切似乎都按照你的意愿运作.虽然我没有尝试按照上面的块中的.addClass(‘visible’)进行操作,但我还是不管它.
