Color flash in Jquery?

I am working on a JQuery, which hides & shows a particular element whenever user checks a box. I want to do a color flash on the element which is changed from hidden to visible, so that user knows where it is.

I tried doing thi开发者_开发问答s

jQuery("#login-form").show()
                     .css({backgroundColor: "red"})
                     .delay(2000)
                     .queue(function() {
                         jQuery("#login-form").css({backgroundColor: "#FFFFFF"});
                     });

but it works for the first time only, after then it just stops. Any ideas?

You might check out the ui/effect pulsate: http://docs.jquery.com/UI/Effects/Pulsate

$(#login-form).effect("pulsate", { times:3 }, 2000);

This does require you to download the ui lib configured to include pulsate.

Your words "the first time" suggest that you expect this to flash multiple times. To flash x times, use the following jQuery script. This way you do not have to install any jQuery effects libraries.

var x = 10;
$('#login-form').show();
for (var i = 0; i < x; i++) {
    $('#login-form').css({backgroundColor: 'red'})
                    .delay(2000)
                    .css({backgroundColor: 'FFFFFF'})
                    .delay(2000);
}

If you have jQuery UI, highlight does this:

$("#login-form").effect("highlight", 2000);