jquery - jQuery UI 的 addClass 动画不会对子元素的更改进行动画处理

Question

我正在尝试使用 jQuery UI 的添加/删除类动画来切换父元素上的类，这将动画整个页面中各种子元素的许多变化。当 CSS 更改直接影响我正在添加类的元素时，我可以让它工作，但它似乎并没有为子元素的更改设置动画。

例如，如果我的 HTML 是这样的：

<div class="parent">
  <span class="child">added to my parent</span>
</div>

CSS：

.red-parent .child { background-color: red; }

当我尝试这样做$( ".parent" ).addClass("red-parent",2000)时，没有动画.child- 2 秒后颜色变为红色。

任何建议将不胜感激！

更新：

我仍然无法弄清楚这一点，但能够使用 CSS3 的转换在兼容的浏览器中近似效果：

.child {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

这意味着我不必担心 jQuery 动画 - 根本不必使用 jQuery UI。addClass()等将自动动画。但是，jQuery UI 不应该能够做到这一点吗？CSS 过渡对于我想要的东西来说有点矫枉过正，并且可能会妨碍我想要在相同元素上执行的其他动画（例如，将鼠标悬停在菜单项上）。

score 4 · Accepted Answer

调用 .addClass 时需要传递 children:true 选项

$(".parent").addClass("red-parent", { duration:2000, children:true });

jQueryUI 文档说如下：

children（默认值：false）
类型：Boolean
动画是否应该另外应用于匹配元素的所有后代。应谨慎使用此功能，因为确定要为哪些后代设置动画的成本可能非常昂贵，并且会随着后代的数量线性增长。

score 1 · Accepted Answer

jQuery UI 1.8.x 仅对从指定元素“.parent”添加/删除的类的属性进行动画处理。然后死者在动画结束时“弹出”他们的属性。如果您想为孩子制作动画，则将类添加到每个孩子并为孩子更新您的 CSS。

我还用“.click”替换了鼠标事件，用“.toggleClass”替换了方法。

$(function() {
    $( "#button" ).click(
        function() {
            $( ".parent" ).children().toggleClass("red", 2000);
        });
});

jsFiddle 示例：http: //jsfiddle.net/bTcAV/1/

score -2 · Accepted Answer

你需要使用jQuery UI 1.8.18. 将其导入您的脑海中。您可以从这里下载它http://jqueryui.com/download 应该可以。

3 回答 3