jQuery动画颜色变化

Question

我正在尝试将链接颜色从当前颜色更改为其他颜色.

$(window).load(function(){
    $('.article-preview h1 a').hover(function(){
        $(this).animate({
            color: #ffffff
        }, 1500);
    });
});

由于某种原因,它不起作用.我正在使用jQuery颜色插件.

Answer 1

你需要将hex三元组包装在一个字符串中,改变这个:

color: #ffffff

对此:

color: "#ffffff"

Answer 2

基本问题可能是你不知道jQuery/JavaScript的符号,
编写#ffffff会让你得到SyntaxError,因为SharpSign + Letters在JS中没有任何意义.
快速解决方案:您必须将hexa颜色作为字符串传递:color: "#ffffff"

jQuery支持.css()和.animate()方法的传递对象的几个不同的符号,
让我指导你完成它们.

属性名称/密钥

(边框,宽度,......)可以用3种方式编写:

backgroundColor    //DOM formatting
'backgroundColor'  //DOM formatting BUT - passed as a STRING
'background-color' //CSS formatting - passed as a STRING

属性值/值

(#ffffff,0px,none,...)可以用3种方式编写

0         // 'pure' number - Integer (useful when pre-calculating pixels)
20.5      //               - Float
'0'       //  number BUT passed as STRING - Integer
'20.5'    //                              - Float
'0px'     //  string
'#ffffff' //  - || -
'auto'    //  - || -

你可以粗鲁地说,除了像素之外的所有东西总是作为string
=> 传递,这意味着在引号中(单引号'或双引号")或者你当然可以传递一个字符串变量

因此,对于起始者而言,最安全的方法可能是始终对两者使用引号 - 键和值.

...

总体

所有这些实际上都是使用JSON的一部分- JavaScript Object Notation

所有这些都在jQuery的.css()方法文档中描述

提防

(旧版)Internet Explorers中的一些错误(请参阅文档.css()和.animate()方法)

我没有显示所有字符串传递的可能性的示例,例如:

从jQuery 1.6开始,.css()接受类似于.animate()的相对值.相对值是以+ =或 - =开头的字符串,用于递增或递减当前值.例如,如果元素的填充左边是10px,则.css("padding-left","+ = 15")将导致25px的总填充左边.

JSON对象具有比数字和字符串更多的有效值 - boolean,array,object,null ...