2012-02-23 85 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