Проблема с функцией jQuery

Question

Моя простая функция jQ выглядит так

$.fn.animateHighlight = function(highlightColor,type, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = 1500;
    this.stop().css(type, highlightBg).delay(duration).animate({
        type: "black"
    }, animateMs);
};

Звоню вот так

$("#qparamstitle").animateHighlight("red","color", 3000);
$("#params").animateHighlight("red","border-color", 3000);

пытается сделать тип - переменным. Все работает хорошо, кроме анимации. Что я сделал не так, и как заставить его работать?

Answer 1

{
   type: "black"
}

Это создание объекта с ключом "type".Вы не можете использовать переменные в качестве ключей в литералах объекта.

Сначала необходимо объявить переменную и установить значение с помощью [].

$.fn.animateHighlight = function(highlightColor,type, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = 1500;
    var animateVal = {}; // declare object
    animateVal[type] = 'black'; // set `type` value
    this.stop().css(type, highlightBg).delay(duration).animate(animateVal, animateMs);
};

Answer 2

Вам нужно jQuery UI , чтобы иметь возможность анимировать цвета , только jQuery не поддерживает его.Передать объект опции в функцию animate не получится.Вы должны создать объект вне функции и передать объект:

$.fn.animateHighlight = function(highlightColor,type, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = 1500;
    // create objects for the animation options
    var o = {};
    // using the array notation
    // you can create a property of name "type"
    o[type] = 'Black';
    this.stop().css(type, highlightBg).delay(duration).animate(o, animateMs);
};

DEMO