如何为动态添加的元素设置背景颜色动画？

Question

我正在使用 ajax 添加一些元素。对于这个例子，我正在添加用户评论。当用户发表新评论时，他的评论查看第一位并且（这是问题）我想添加新的背景动画第一个评论div。但我知道我们不能用 Jquery 来设置动画颜色。我可以使用 JqueryUI 高亮效果。但我不能 select 新添加的元素。当然在这里使用 delegate() 或 on().. 但我的所有尝试都失败了。

我需要帮助。

一些代码示例；

$("#DoCommentBtn").click(function(){
        var UserID      = 1,
            LookID      = 2,
            Comment     = $("#CommentInput").val(),
            CommentType = 0,
            PostData    = "USERID=" + UserID + "&LOOKID=" + LookID + "&Comment=" + encodeURI(Comment) + "&CommentType=" + CommentType;
            $("#CmAnm").fadeIn();
            $.ajax({
                type:'POST',
                url:'ajax.asp?cmd=docomment',
                dataType:'html',
                data:PostData,
                success:function(cevap) {
                    $("#CmAnm").fadeOut();
                    $("#CommentsArea").load("ajax.asp?cmd=LoadComments&LOOKID=" + LookID + "&PART=0");
                    //Now all comments loaded Here I must animate background first div in #CommentsArea Animation Example: Background color blue to white..  
                }
            });
    });

Answer 1

But i know we cant animate color with Jquery

我不是 jquery 专家，但我相信这是可能的。

这是您要找的吗？

$( "#CommentsArea div:first-child" ).animate({ backgroundColor: "#fff"}, 1000);

应在 1 秒内将背景设置为白色 #FFF (1000ms)

文档：jQuery .animate() - jQuery UI .animate()

编辑：

将背景更改为背景颜色

Answer 2

动画属性和值

所有动画属性都应动画为单个数值，但以下情况除外；大多数非数字属性无法使用基本 jQuery 功能

进行动画处理

（例如，width、height 或 left 可以设置动画，但 background-color 不能，除非使用 jQuery.Color 插件）

文档：JQuery animate()

那么我现在可以做什么？

我正在添加这个库；

Jquery.Color

现在 jsfiddle 示例开始工作了。

示例代码：

$(".justDiv").animate({ backgroundColor: "#ffffff",width:105 }, 1000);

如何为动态添加的元素设置背景颜色动画？

How Can I Animate Background Color Dynamically Added Element?

javascript

css

jquery

jquery-ui

jquery-animate