jQuery背景动画

Posted

技术标签:

【中文标题】jQuery背景动画【英文标题】:Jquery background animate 【发布时间】:2011-06-09 17:25:03 【问题描述】:

是否可以在 jQuery 中为 background-color 设置动画,因为它不起作用。

$('#something').animate(
    background :"red"
, 1000);

【问题讨论】:

其实如何才能平滑的改变一个div的背景?? 如果你想对你的问题进行补充,你可以编辑它而不是评论它。只需点击问题左下角附近的edit 链接即可。 值得注意的是background是定义background-colorbackground-imagebackground-positionbackground-repeatbackground-attachment的简写符号。您尝试制作动画的属性(在您的问题中已修复)是​​ background-color(或者,在没有引号的 JS 中,backgroundColor)。 【参考方案1】:

来自docs,

jQuery UI 项目扩展了.animate() 方法,允许对一些非数字样式(例如颜色)进行动画处理。该项目还包括通过 CSS 类而不是单个属性指定动画的机制。

因此,如果您使用 jQuery UI,您可以为背景颜色设置动画。只要确保您使用backgroundColor 而不是background

jQuery 的color animations plugin 也可以。

实时示例:http://jsfiddle.net/thai/NXejr/2/

【讨论】:

【参考方案2】:

你需要一个插件来用 jQuery 做彩色动画:

http://plugins.jquery.com/project/color

【讨论】:

+1。这。根据the API docs: "非数字属性不能使用基本的 jQuery 功能进行动画处理。(例如,widthheightleft 可以进行动画处理,但 background-color 不能进行动画处理。 )"【参考方案3】:

试试这个:

$('#something').animate( backgroundColor: "#FF0000" , 1000, null, function () 
      $('#something').css("backgroundColor", "#FF0000");
  );

我在 animate 方面取得了不同程度的成功,但发现使用其内置回调和 jQuery 的 css 似乎适用于大多数情况。在 IE9、FF4、Chrome 中测试,使用 jQuery 1.5。

如需更完整的解决方案,请添加此插件:

$(document).ready(function () 

    $.fn.animateHighlight = function (highlightColor, duration) 
        var highlightBg = highlightColor || "#FF0000";
        var animateMs = duration || 1000;
        var originalBg = this.css("background-color");

        if (!originalBg || originalBg == highlightBg)
            originalBg = "#FFFFFF"; // default to white

        jQuery(this)
            .css("backgroundColor", highlightBg)
            .animate( backgroundColor: originalBg , animateMs, null, function () 
                jQuery(this).css("backgroundColor", originalBg); 
            );
    ;
);

然后这样称呼它:

$('#something').animateHighlight();

【讨论】:

【参考方案4】:

这是使用纯 jQuery 动画 RGB 颜色的简单代码(而不是使用 jQuery.Color 插件)

var start = [255, 0, 0], end=[255,255,255];
$('#element').animate('aaa': 1, step: function(now)
    $(this).css('background-color', 'rgb('+
        parseInt(start[0] + (end[0]-start[0]) * now) + ',' +
        parseInt(start[1] + (end[1]-start[1]) * now) + ',' +
        parseInt(start[2] + (end[2]-start[2]) * now) + ')'
    )
, complete: function()$(this).css('aaa', 0))

【讨论】:

【参考方案5】:

您可以使用 CSS3 过渡来实现相同的效果。你的动画可以通过

#something 
  -webkit-transition: background-color 1s linear;
   transition: background-color 1s linear;
   background: red;


此解决方案的唯一问题是 IE

【讨论】:

【参考方案6】:

使用类似的语法(...background-color :"red"...),我得到错误

SyntaxError: Unexpected token -

我能够通过将 CSS 属性 background-color 封装在单引号中来使其工作:

$('#something').animate(
    'background-color' :"red"
, 1000);

【讨论】:

以上是关于jQuery背景动画的主要内容,如果未能解决你的问题,请参考以下文章

JQuery 帮助 - 动画背景颜色

jQuery同时动画和淡化背景图像

jQuery背景动画

为 Div 背景设置动画 - CSS 或 jQuery

Y 轴上的 JQuery 动画背景图像

Jquery - 固定浮动元素和动画背景