Question

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

关于如何使用JQuery执行此操作的任何想法？

我知道JQuery既有“动画”又有“高亮”功能。看来“亮点”可能是合适的选择，但我不确定。

由于

Answer 1

为这一功能加载jquery UI非常繁重，但如果你正在使用它，你想要的效果是“突出显示”

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

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

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

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

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

Answer 4

您可以使用内置的jQuery函数animate()和回调来将div恢复为原始颜色。或者使用jQuery pulse plugin自动执行此操作。

希望有所帮助！

Answer 5

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

查看之前的SO q & a

Answer 6

您可能需要查看this one等插件，以实现某些称为“闪存”的插件。

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

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

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

JQuery帮助 - 动画背景颜色

8 个答案: