jQuery动画颜色改变

jQuery animate color change

本文关键字：改变 颜色 动画 jQuery      更新时间：2023-09-26

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

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

由于某些原因，它不起作用。我使用jQuery的颜色插件

您需要将十六进制三元组包装在字符串中，更改此:

color: #ffffff

: 

color: "#ffffff"

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

jQuery支持.css() &.animate()方法,

属性名/键

(border, width，…)有三种写法: 

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

属性值/值

(#ffffff, 0px, none，…)可以有三种写法

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对象表示法的一部分

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

中有描述<标题>谨防h1> 旧的)Internet explorer中的一些bug(参见.css()和.animate()方法的文档)

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

从jQuery 1.6开始，.css()接受类似于.animate()。相对值是以+=或-= to开头的字符串增加或减少当前值。例如，如果一个元素的Padding-left为10px， .css(" Padding-left "， "+=15")的结果为左padding = 25px.

JSON对象有比数字和字符串更多的有效值-布尔值，数组，对象，null…

相关文章：