JQuery帮助 - 动画背景颜色

Question

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

关于如何使用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 脉冲插件自动执行此操作。

希望有帮助！