7

我有一组 div，每个对应一组类别。当我单击过滤器时，这将更改 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');

编辑： http: //jsfiddle.net/Ccswn/3/ Fiddle of the thing

4

2 回答 2

4

我建议使用animate()代替fadeOut()：

$('div').click(
    function() {
        $(this).animate({
            'height': 0,
            'opacity': 0
        }, 750, function() {
            $(this).remove();
        });
    });​

JS 小提琴演示。

编辑以合并 jQuery/CSS 解决方案：

更改 CSS.item以包含以下内容：

.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;
}

并将其更改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;
}

使用以下 jQuery：

// content animate
$('#work-container > div[class*=hidden]').addClass('hidden');
return false;

JS 小提琴演示。

然后一切似乎都如你所愿。尽管我没有尝试遵循.addClass('visible')上面块中的内容，但我没有理会它。

不过，这确实需要一个支持 CSS 转换（并且支持opacity）的浏览器，因此它在您的用例中可能并不完美。

于 2012-04-18T15:58:28.053 回答
0

你可以使用show和hide方法：http:
//jsfiddle.net/Ccswn/5/

于 2012-04-18T15:55:37.687 回答