同时进行手风琴和变色动画

Question

I'm using jQuery 2.0.3 and jQuery UI 1.10.3 's accordion , and am trying to change the colour of the accordion panels as they open and close by doing something like this:

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

I'm finding that the change is animated the first time each header is clicked, although the accordion animation waits for it to finish before starting. Subsequent section activations aren't animated, although the colour change does occur.

How can I make this animate at the same time as the accordion animation?

Answer 1

You could use css transitions to accomplish that effect.

Working Example

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

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