CODEWITHSUNDEEP
javascriptjqueryjquery-ui
erbridge
erbridge

Reputation: 1386

Simultaneous Accordion and Colour Change Animations

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?

Upvotes: 0

Views: 146

Answers (1)

apaul
apaul

Reputation: 16170

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
});

Upvotes: 2

Related Questions