如何使用 jquery-ui 的 toggleClass 更好地制作动画？

Posted 2023-05-08

【中文标题】如何使用 jquery-ui 的 toggleClass 更好地制作动画？

【英文标题】：how can I animate this a bit better using jquery-ui's toggleClass?

【发布时间】：2012-03-24 11:59:36

【问题描述】：

我有以下代码：

http://jsfiddle.net/zmhRK/

这个问题非常形象化，所以我认为我不能比在 jsfiddle 上实际展示它更好地解释它。问题是当您按下 [toggle] 时，您可以看到列表项正在扩展，并且在此过渡效果中，您看到的只是父母的背景颜色，这相当难看。所以，我想要的是列表项的内容在动画期间可见，而不是仅在动画之后可见。

我知道这是可能的，例如，如果我设法在过渡中的元素上将样式属性设置为 display:block，但是一旦过渡完成，我将需要某种回调函数来删除 display:block . Afaik，这个回调函数不存在。

有什么办法可以解决这个问题吗？

【问题讨论】：

你为什么不slideDown() 而不是toggleClass()？

因为子元素的宽度变化不会通过 slideDown 缓和。正如 Jaspers 解决方案所观察到的那样

【参考方案1】：

您可以使用.slideToggle() 来创建您的动画：

$(document).ready(function()
    $('.sidebar-menu-item-controls').append('[toggle]').click(function()

        //select the parent of this element, then select the next sibling,
        //which is the UL associated with this click event
        $(this).parent().next().slideToggle(300);
    );
);​

这是一个演示：http://jsfiddle.net/jasper/zmhRK/8/

请注意，这也适用于您的嵌套 UL。

【讨论】：

如果您单击 Channels 列表项上的切换，您可以看到宽度对齐而不是缓动。有什么办法解决这个问题？

@netbrain 如果你在元素上设置了一个太宽的宽度，并且在它的容器上设置了overflow-x : hidden，它应该剪切内容而不是改变容器的大小。我尝试添加一个 CSS 过渡，但无法让它为宽度变化设置动画......

很遗憾，无法剪辑内容。

@netbrain 如果为容器设置了定义的宽度，可以添加word-wrap : break-word，内部内容不会溢出容器，但也不会隐藏，单词会中断并重新流动到下一行：developer.mozilla.org/en/CSS/word-wrap

恐怕设置固定宽度也不是一种选择。非常好的建议顺便说一句，让他们来吧；）