jQuery帮助 - 动画背景颜色

Question

使用jQuery，我想创建一个函数，当我调用该函数时，它将把我的“#page” DIV的背景颜色从CSS定义的背景颜色淡出到黄色，然后再回到#page的原始CSS背景颜色。

你们有什么Idea可以使用jQuery实现这个功能吗？

我知道jQuery有“animate”和“highlight”功能。看起来“highlight”可能是适当的选项，但我不确定。

谢谢。

- GregY

Answer 1

只为了这一个功能而加载jQuery UI比较繁重，但如果您已经在使用它，那么您想要的效果是'highlight'。

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

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

- micmcg

---

@micmcg，我怎样才能以编程的方式调用“highlight”方法 - 在你的示例中，它是通过鼠标单击调用的。 - GregY

只需在事件处理程序中使用以下代码： $("#page").effect("highlight", {}, 3000); - micmcg

如果你调用了这个效果，但是什么都没有发生，确保你在自定义 JQuery UI 下载中包含了这个效果。因为默默失败是一种时髦的失败方式。 - Roman Starkov

很好，要更改背景颜色，只需在括号内放置类似{color:'rgba(255,255,255,.3)'}的内容即可。 - andreszs

Answer 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

---

@Funky Dude，看起来很有前途。我需要下载哪些最小组件才能拥有“animate”功能？似乎我安装的JQuery基本安装不包括“animate”。 - GregY

顺便提一下，http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations 恰好是我想要实现的，但需要将其变成可调用的函数。 - GregY

jQuery当前的文档（位于http://api.jquery.com/animate/）表示，如果您想要动画颜色，则需要jQueryUI。 - Marius Gedminas

Answer 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插件）。

- matadur

Answer 4

你可以使用内置的jQuery函数animate()并带有回调函数来将div恢复为原始颜色。或者使用jQuery pulse插件自动执行。

希望能对你有所帮助！

- Al.

Answer 5

测试所有浏览器

$(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();
    }); 
});

- Anton Dimitrov

Answer 6

您需要color插件来实现颜色之间的动画效果。

查看之前的SO 问答

- redsquare

Answer 7

你可能想要查看像this one这样的插件，以实现一些人所谓的“闪光效果”。

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

- Soviut

Answer 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);
  }
});

- Roman Losev