2012-02-23 86 views
-1

我簡單JQ功能看起來像調用像jQuery函數問題

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

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

試圖讓類型 - 變量。除了動畫以外,所有的都很好我做錯了什麼,以及如何讓它工作?

+1

所以解釋什麼是壞了,你希望而不是發生什麼。另外,發佈jsFiddle示例可以幫助人們幫助你。 – Sparky 2012-02-23 06:18:32

+3

將鼠標懸停在向下投票箭頭上,查看一些有效的投票原因。抱怨反對票和打電話給這個論壇名稱的用戶可能會讓你得到更多的反對票。 – Sparky 2012-02-23 06:20:06

+0

@ Sparky672'type:「black」'type是可變的。它可能是邊框顏色,顏色..別的東西。動畫函數不接受變量參數 – heron 2012-02-23 06:21:07

回答

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); 
}; 
+0

哦..似乎邊框顏色將無法正常工作。對於css,它是'border-color',用於爲'borderColor'設置動畫效果。我該如何解決這個問題? – heron 2012-02-23 06:26:30

+1

試着理解這個解決方案。 '邊境color'將工作以及'borderColor'但_You不能在對象使用變量作爲鍵literals_ – elclanrs 2012-02-23 06:29:42

+0

@elclanrs 測試解決方案下,你評論 – heron 2012-02-23 08:34:13

0

你需要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

+0

我已經包含了jquery-ui到這個項目。所以你也可以推薦你的jq-ui解決方案。 – heron 2012-02-23 06:32:52