当它们移动以填充其他淡出的 div 留下的空白空间时如何为 div 设置动画

Posted 2023-05-08

【中文标题】当它们移动以填充其他淡出的 div 留下的空白空间时如何为 div 设置动画

【英文标题】：How to animate divs when they move to fill empty space left by other divs that fade out

【发布时间】：2012-04-30 01:59:52

【问题描述】：

我有一组 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/这件事的小提琴

【问题讨论】：

你有演示吗？或者，至少，我们可以将一些代表性的 html 复制并粘贴到 演示中？

请提供一个 jsfiddle jsfiddle.net

您想为它们制作更多动画吗？ jsfiddle.net/Ccswn/5

【参考方案1】：

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

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

JS Fiddle demo.

---

编辑以合并 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;

并将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 Fiddle demo.

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

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

【讨论】：

我应该如何做反向动画让隐藏的 div 再次出现？如果高度应该是动态的，我的意思是

这类似于 show 和 hide 所做的。它们为 CSS 属性高度/宽度/不透明度等设置动画。

@ElaineMarley：看看编辑，希望这对你有用。

这看起来不错，隐藏/显示解决方案也在小提琴上完成了这项工作，但是一旦我在 div 中有图像，动画就会中断一点。此外，我不太介意此解决方案仅适用于现代浏览器，因为没有此解决方案不会破坏其他浏览器的功能。

【参考方案2】：

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

【讨论】：

他们会这样做，但突然间，我想为这样的运动制作动画。