连续的背景色动画请求因jQuery 1.6.1而失败

Question

I'm trying to "flash" an input box by changing the background color briefly and then reverting back to the original bg color using jquery to indicate an error and grab the users attention.

Here's a fiddle to demonstrate what I'm trying to do.

I have to use jquery version 1.6.1. In the fiddle demo, it's using 1.6.4 and the color of the input box never changes at all. Actually, it doesn't work even with 1.11. In my local tests with my code, the input box changes red with the first animation call, but fails to do anything for the second animation call (to revert the bg color back to white). It just stays red.

I'm using very similar code to do the same thing in another site, except using jquery 1.11 and it works fine.

Is this just a compatibility issue? Is there some way I can make this work properly with version 1.6.1 ?

Here's the code:

function flashInputBox(id) {
    var input = $('#'+id);
    input.focus();
    input.stop(true).animate({'background-color': '#EC8686'}, 350, function() {
        input.stop(true).animate({'background-color': '#FFFFFF'}, 1000);
    });
}

I forgot to mention that I'm using jQuery UI v1.8.18

The problem is properly replicated now in this fiddle (same code, just added jQuery UI 1.8.18).

Answer 1

Colors aren't numeric values, so they can't be animated. From the jQuery documentation for .animate , emphasis mine:

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width , height , or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used ). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

If you don't want to (or can't) use the jQuery.Color plugin, you'll need to animate the color "manually", eg by setting an interval and changing the color at each step.

Answer 2

Do you need to use jQuery? If not, this is way easier in CSS using key frames. If it is, skip my CSS explanation.

CSS

This still uses jQuery, but it gives the animation job to CSS, making your code more legible. I set this up in jsFiddle if you want to check it out: jsFiddle Example

First, setup a keyframe:

@keyframes pulse{
    from {
        background: #ec8686;    
    }
    to {
        background: #ffffff;
    }
}

@-webkit-keyframes pulse{
    from {
        background: #ffffff;    
    }
    to {
        background: #ec8686;
    }
}

and attach it to your existing input:

#my-input{
    ...
    -webkit-animation: pulse 5s infinite;
    -webkit-animation-play-state: paused;
    ...
}

Then the jQuery becomes a matter of letting the animation play for a few seconds:

function doIt() {
    $("#my-input").css("-webkit-animation-play-state", "running");

     setTimeout(function() { 
           $("#my-input").css("-webkit-animation-play-state", "paused");
     }, 5000);
}

Also, you don't even need the jQuery to trigger the animation. The button click can directly trigger a CSS animation, however I figured you have some sort of code to check what's in the box for accuracy, so that why I kept your old function.

Note that this keyframe ends suddenly, so you can totally have a 0% , 50% , 100% keyframe instead.

Now for the raw jQuery way:

jQuery

For your jQuery, its much easier just to either specify your input directly (aka $("#my-input-name") ), or if its just one input, I got it working just by using the following code instead:

function doIt() {
    ...
    input.stop().animate({'background-color': '#EC8686'}, 350, function() {
        // just say input here //
        input.animate({'background-color': '#FFFFFF'}, 1000);
    });
}