jQuery backgroundColor animation weirdness

Question

I have the below javascript function that flashes the bg of a link 3 times when a new document is added to a list.

This works fine the first time, but subsequent calls to the function cause the flashing to become messed up. The more it's called the weirder the flashing behaviour becomes.

I am seeing the same effect in IE8 and the latest version of Chrome.

var highlightNew = function (control) {
    var item = $('li.new-document a.document-link', control);
    if (item.length > 0) {
        var highlightColor = '#ffa500';
        item.stop()
            .animate({ backgroundColor: highlightColor }, 'slow')
            .animate({ backgroundColor: 'transparent' }, 'slow')
            .animate({ backgroundColor: highlightColor }, 'slow')
            .animate({ backgroundColor: 'transparent' }, 'slow')
            .animate({ backgroundColor: highlightColor }, 'slow')
            .animate({ backgroundColor: 'transparent' }, 'slow');
    }
}

check out this other question (possible duplicate?) http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor — Zach Lysobey, Dec 06 '12 at 21:11

score 0 · Answer 1 · answered Dec 06 '12 at 21:06

Do you have a plugin for this?

You cannot animate background color, per jQuery documentation. jQuery recommends the jQuery.Color plugin to be used for this.

jQuery animate documentation - http://api.jquery.com/animate/

jQuery color plugin - https://github.com/jquery/jquery-color

jQuery backgroundColor animation weirdness

1 Answers1