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, чтобы иметь возможность animate colors, JQuery только не поддерживает его.

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

$.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