淡出的背景颜色与jQuery

我得到了AJAX后得到像下面的最新评论：淡出的背景颜色与jQuery

function add_the_answer_to_the_list(dataString) 
{ 
    // append this damn comment to the list 
    $.ajax 
    ({ 
    type: "POST", 
    url: "home/get_answer/", 
    data : dataString, 
    success: function(data) 
    { 
     var data = jQuery.parseJSON(data); 

     //append the comment 
     $(
     '<li><article>'+data+ '</article></li>' 
    ).hide().prependTo("#answer_list ul").fadeIn(); 

    } 
    });

现在，当评论中我应该怎么办褪色突出与红色注释，然后慢慢地淡化背景颜色回到原来的颜色？有没有办法做到这一点，没有插件的东西？

感谢

来源

2013-01-23 under5hell

问题解决的jQuery插件的颜色。我使用JqueryUI核心效果：

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

来源

2013-01-23 15:02:13 under5hell

可以使用CSS3 Transition效果做到这一点。

例

的CSS3类使用 - 这将允许考虑不透明度和背景转换，因此它可以“淡入”，并在同一时间改变颜色：

.comment { 
opacity: 0; 
background: #ff0000; 
transition: background .25s ease-in-out; 
-moz-transition: background .25s ease-in-out; 
-webkit-transition: background .25s ease-in-out; 
transition: opacity .25s ease-in-out; 
-moz-transition: opacity .25s ease-in-out; 
-webkit-transition: opacity .25s ease-in-out; 
} 

.comment-fade-in { 
background: #00ff00 /* make this your 'original color' */ 
opacity: 1.0; 
}

现在javascript代码：

function add_the_answer_to_the_list(dataString) 
{ 
// append this damn comment to the list 
$.ajax 
({ 
type: "POST", 
url: "home/get_answer/", 
data : dataString, 
success: function(data) 
{ 
    var data = jQuery.parseJSON(data); 

    //append the comment 
    var comment = $('<li><article>'+data+ '</article></li>'); 
    comment.addClass('comment'); 
    comment.prependTo("#answer_list ul"); 
    comment.addClass('comment-fade-in'); 
}

}）;

试一下

来源

2013-01-23 13:30:56 jenovachild

不支持IE！ – iappwebdev

好主意，你会给我一个例子如何在代码上实现该技术？ – under5hell

举个例子，在http://www.w3schools.com/css3/tryit.asp？filename = trycss3_transition1 – iappwebdev

CSS：

* 
{ -webkit-transition: background-color .25s ease-out; 
    -moz-transition: background-color .25s ease-out; 
    -o-transition: background-color .25s ease-out; 
    -ms-transition: background-color .25s ease-out; 
    transition: background-color .25s ease-out; } 

.highlight 
{ background: red; }

JQuery的为您的AJAX回调函数：

$('<li><article>'+data+ '</article></li>') 
.hide() 
.prependTo("#answer_list ul") 
.fadeIn(500, function() { 
    $(this).addClass('highlight') 
    .delay(500) 
    .removeClass('highlight'); 
});

来源

2013-01-23 13:46:37 Eric

您可以使用jQuery UI的switchClass。例如：http://jsfiddle.net/DH8jK/1/

在您的例子：

$.ajax 
({ 
type: "POST", 
url: "home/get_answer/", 
data : dataString, 
success: function(data) 
{ 
    var data = jQuery.parseJSON(data); 

    //append the comment 
    $(
    '<li><article>'+data+ '</article></li>' 
).hide().prependTo("#answer_list ul").fadeIn().switchClass('class-with-background', 'class-without-background', 2000); 

}

更多信息，请参见http://jqueryui.com/switchClass/。

编辑

它甚至更容易removeClass（http://jqueryui.com/removeClass/）

$(
    '<li class="class-with-background"><article>'+data+ '</article></li>' 
).hide().prependTo("#answer_list ul").fadeIn().removeClass('class-without-background', 2000);

来源

2013-01-23 13:55:23 iappwebdev

需要一个插件，如果你不希望使用CSS3过渡或动画。通过使用jQuery.Color插件，您可以使用jQuery的.animate()方法为背景颜色设置动画。

$(ele).animate({backgroundColor:'rgba(0,0,0,0)'});

来源

2013-01-23 13:58:51 Licson

您可以使用它仅仅是1.7 KB精缩

当我创建了一个小提琴http://jsfiddle.net/vKaYJ/

来源

2013-01-23 14:25:55

请仔细阅读我的问题小伙子。我需要这样做，没有插件。谢谢 – under5hell

淡出的背景颜色与jQuery

回答

相关问题