javascript - 同时手风琴和颜色变化动画

Question

我正在使用 jQuery2.0.3和 jQuery UI 1.10.3，accordion并尝试通过执行以下操作来更改手风琴面板的颜色：

$(".main-content").accordion({
    active: false,
    beforeActivate: function(event, ui) {
        ui.newHeader.animate({
            "background-color": "white"
        });
    },
    collapsible: true
});

我发现第一次单击每个标题时更改是动画的，尽管手风琴动画在开始之前等待它完成。尽管确实发生了颜色变化，但后续部分激活没有动画效果。

如何在制作手风琴动画的同时制作此动画？

Answer 1

您可以使用 css 过渡来实现该效果。

工作示例

.ui-state-active {
    background: white;
    transition: background 400ms;
}
.ui-state-default {
    transition: background 400ms;
}

$(".main-content").accordion({
    active: false,
    collapsible: true
});