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转换对于我想要的东西来说有点过分，并且可能妨碍我想对相同元素做的其他动画（例如，将鼠标悬停在菜单项上）。

Answer 1

调用.addClass

时需要传递children：true选项

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

jQueryUI docs说：

儿童（默认：假）
  类型：布尔

  是否应将动画另外应用于匹配元素的所有后代。应谨慎使用此功能，因为确定哪些后代为动画的成本可能非常昂贵，并且会随着后代的数量线性增长。

Answer 2

jQuery UI 1.8.x仅动画从指定元素“.parent”添加/删除的类的属性。然后死者在动画结束时“弹出”他们的属性。如果要为子项设置动画，请将该类添加到每个子项并更新子项的CSS。

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

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

Answer 3

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