如何动态添加元素制作背景色动画

How Can I Animate Background Color Dynamically Added Element?

本文关键字：元素 背景色 动画 添加 何动态 动态      更新时间：2023-09-26

我正在使用ajax添加一些元素。对于这个例子，我添加了用户评论。当用户做出新的评论时，他的评论查看在第一位，（这是个问题）我想添加新的背景动画第一个评论分区。但我知道我们不能用Jquery制作颜色动画。我可以使用JqueryUI高亮效果。但我无法选择新添加的元素。当然，在此处使用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..  
                }
            });
    });

但我知道我们不能用Jquery 制作色彩动画

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

这就是你要找的吗？

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

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

文档：jQuery.animate（）-jQuery UI.animate

编辑：

将背景更改为backgroundColor

动画属性和值

除以下说明外，所有已设置动画的属性都应设置为单个数值；大多数非数字属性不能使用基本的jQuery功能进行动画处理

（例如，宽度、高度或左侧可以设置动画，但背景颜色不能设置动画，除非使用jQuery.color插件）

文档：JQuery动画（）

那么我现在能做什么呢？

我正在添加此库；

Jquery.Color

现在jsfiddle示例正在工作。

示例代码：

$(".justDiv").animate({ backgroundColor: "#ffffff",width:105 }, 1000);
相关文章：