Javascript JQuery帮助-设置背景颜色动画

使用JQuery，我要做的是创建一个函数，当我调用该函数时，它会将我的“#page”DIV的背景色从CSS定义的背景色淡入黄色，然后返回到#page的原始CSS背景色

关于如何使用JQuery实现这一点，有什么想法吗

我知道JQuery同时具有“动画”和“突出显示”功能。看起来“突出显示”可能是合适的选择，但我不确定

---

谢谢

您可以使用带有回调的内置jQuery函数将

div

恢复为原始颜色。或者使用自动执行此操作

希望有帮助

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

---

请参阅前面的SO

，您可能希望查看插件，例如，以实现一些人称之为“flash”的功能

---

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

仅为这一项功能加载jquery UI相当繁重，但如果您以任何方式使用它，您想要的效果就是“突出显示”

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

---

如果要使用命名颜色（例如

'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();

---

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

在所有浏览器中测试

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

---

只有这对我有帮助。资料来源：

$（“div”）。单击（函数（）
{
//你要洗3次吗
对于（i=0；i@Funky伙计，这看起来很有希望。我需要下载什么组件才能拥有“动画”功能？顺便说一句，我安装的JQuery的基本安装似乎不包括“动画”，这正是我想要做的，但使其成为可调用函数JQuery的当前文档（在）假设您需要jQueryUI，如果您想设置颜色的动画。@Micmag，我如何编程调用“highlight”方法-在您的示例中，它是鼠标点击调用的。只需使用事件处理程序中的代码。$（“#page”）.effect（“highlight”，{}，3000）；如果调用此函数，并且完全没有发生任何事情，请确保在自定义JQuery UI下载中包含此效果。因为默认失败是失败的流行方式。非常好，要更改bgcolor，只需在括号中添加类似于
{color:'rgba（255255255，.3）}
的内容即可。
$(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();
    }); 
});

$("div").click(function() 
{
  // do fading 3 times
  for(i=0;i<3;i++) 
  {
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
  }
});