13

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

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

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

谢谢

4

8 回答 8

17

仅针对这一功能加载 jquery UI 相当繁重，但如果您仍然使用它，您想要的效果是“突出显示”

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

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});
于 2009-08-17T01:52:20.517 回答
7 
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
            });
        });
    }
}
于 2009-08-16T23:35:25.130 回答
6

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

尝试添加此功能：

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

于 2011-04-19T14:32:22.103 回答
2

您可以使用带有回调的内置 jQuery 函数animate()div来返回原始颜色。或者使用jQuery 脉冲插件自动完成。

希望有帮助！

于 2009-08-16T22:51:45.250 回答
1

用所有浏览器测试

$(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();
    }); 
});
于 2013-07-09T11:52:59.987 回答
1

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

请参阅以前的 SO q & a

于 2009-08-16T22:58:05.610 回答
1

您可能想查看诸如此类的插件，以实现某些人所说的“flash”。

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

于 2009-08-16T23:03:12.850 回答
0

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

$("div").click(function() 
{
  // do fading 3 times
  for(i=0;i<3;i++) 
  {
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
  }
});
于 2014-04-15T12:46:03.007 回答