CODEWITHSUNDEEP
javascriptjquerycsscss-transitions
Poma
Poma

Reputation: 8484

removeClass is not working w/CSS transitions

I'm trying to make a blink effect on click (instantly set background and then fade out) but on second click removeClass is not removing it. Where is a mistake?

JS:

$('div').click(function() {
    $(this).css({transition: '0s'}).addClass('qwe')
    .delay(1).queue(function() {
        $(this).css({transition: '2s'}).removeClass('qwe');
    });
});

CSS:

div{
    height: 100px;
    width: 100px;
    background: gray;
}
.qwe {
    background: green;
}

Fiddle

Upvotes: 2

Views: 123

Answers (2)

Poma
Poma

Reputation: 8484

Solved it using jQuery UI

$('div').click(function() {
    $(this).addClass('qwe').switchClass('qwe', '', 1000);
});

Upvotes: 1

Nickolay
Nickolay

Reputation: 32063

The browsers are built to optimize consequent style changes by coalescing them. In case of CSS transitions they do it a bit over-zealously.

Currently there's no 'clean' way around it, the best you can do in current browsers is force restyle via window.getComputedStyle(document).color or similar before the applying the changes that would invoke transition (removeClass in your case).

See Clean way to programmatically use CSS transitions from JS? for more information.

Upvotes: 3

Related Questions