Question

I wanna pass an object from jquery using a selector to a javascript function like below.

flash($("#something span"), "#fff", 250);

but it does not seem to be working.

and I am not sure what to put in the javascript function.
What I make now is:

function flash(obj,color1,color2,duration) {
    obj.animate({backgroundColor:color1},duration);
    setTimeout(function(){this.animate({backgroundColor:color2},duration);},duration);
}

or is there another way instead of passing an object? for example, in jquery:
$(“this”).flash(“#f79999”, “#eee”, 250);

but then how to define the javascript function?

Answer 1

You’ll have to include the jQuery.Color plugin to animate properties like background-color.

From “Animation Properties and Values:”

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). […]

---

is there another way instead of passing an object? for example, in jquery: $(“this”).flash(“#fff”,250);

jQuery’s Plugins/Authoring should help with this. But, you could define it as:

jQuery.fn.flash = function (color, duration) {
    return this.animate({ backgroundColor: color }, duration);
};

$('#something span').flash('#fff', 250);