JQuery 帮助 - 动画背景颜色

Posted 2023-05-08

【中文标题】JQuery 帮助 - 动画背景颜色

【英文标题】：JQuery help - animate background color

【发布时间】：2010-11-20 02:37:47

【问题描述】：

使用 JQuery，我想做的是创建一个函数，当我调用该函数时，它会将我的“#page”DIV 的背景颜色从 CSS 定义的背景颜色淡化为黄色，然后恢复为原始 CSS 背景#page 的颜色。

关于如何使用 JQuery 做到这一点的任何想法？

我知道 JQuery 具有“动画”和“突出显示”功能。似乎“突出显示”可能是合适的选项，但我不确定。

谢谢

【参考方案1】：

仅针对这一功能加载 jquery UI 相当繁重，但如果您仍然使用它，您想要的效果是'highlight'

http://docs.jquery.com/UI/Effects/Highlight

$("div").click(function () 
      $(this).effect("highlight", , 3000);
);

【讨论】：

@micmcg，我如何以编程方式调用“highlight”方法 - 在您的示例中，它是通过鼠标单击调用的。

只需使用事件处理程序中的代码。 $("#page").effect("highlight", , 3000);

如果您调用它并且绝对没有任何反应，请确保您在自定义 JQuery UI 下载中确实包含此效果。因为默默地失败是一种流行的失败方式。

非常棒，要更改背景色，只需在括号内输入color:'rgba(255,255,255,.3)' 之类的内容。

【参考方案2】：

function flashColor(id)

    var container = $('#'+id);
    if(container.length)
    
        var originalColor = container.css('backgroundColor');
        container.animate(
            backgroundColor:'yellow'
        ,'normal','linear',function()
            $(this).animate(
                backgroundColor:originalColor
            );
        );
    

【讨论】：

@Funky Dude，这看起来很有希望。我需要下载什么最小组件才能拥有“动画”功能？看来我安装的 JQuery 的基本安装不包括“动画”

顺便说一句，docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations 正是我想要做的，但让它成为一个可调用函数

jQuery 的当前文档（api.jquery.com/animate）说如果你想为颜色设置动画，你需要 jQueryUI。

【参考方案3】：

如果你想使用命名颜色（例如'yellow'而不是'#FFFF9C'），你只需要jQuery颜色插件。我使用animate 取得了不同程度的成功，但发现使用它的内置回调加上jQuery 的css 似乎适用于大多数情况。

尝试添加此功能：

$(document).ready(function () 

    $.fn.animateHighlight = function (highlightColor, duration) 
        var highlightBg = highlightColor || "#FFFF9C";
        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); 
            );
    ;
);

并这样称呼它：

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

在 IE9、FF4 和 Chrome 中测试，使用 jQuery 1.5（不需要 UI 插件）。

【参考方案4】：

您可以使用带有回调的内置 jQuery 函数 animate() 将 div 恢复为原始颜色。或者使用jQuery pulse plugin 自动完成。

希望有帮助！

【参考方案5】：

您需要color 插件来在颜色之间设置动画。

查看以前的 SO q & a

【参考方案6】：

您可能需要查看诸如this one 之类的插件来实现某些人所说的“flash”。

不幸的是，搜索“jquery flash plugin”一词会产生数百个 SWF 播放器插件的结果。

【参考方案7】：

在所有浏览器上测试

$(document).ready(function () 
    var id = $("div#1"); // div id=1
    var color = "lightblue"; // color to highlight
    var delayms = "800"; // mseconds to stay color
    $(id).css("backgroundColor",color)
    .css("transition","all 1.5s ease") // you may also (-moz-*, -o-*, -ms-*) e.g
    .css("backgroundColor",color).delay(delayms).queue(function() 
        $(id).css("backgroundColor",""); 
        $(id).dequeue();
    ); 
);

【参考方案8】：

只有这对我有帮助。来源：questions/5205445

$("div").click(function() 

  // do fading 3 times
  for(i=0;i<3;i++) 
  
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
  
);