Question

我收到了AJAX帖子以获得如下的最新评论：

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();

    }
  });

现在，当评论淡入我应该怎样做以突出红色评论然后慢慢淡化背景颜色回原始颜色？有没有办法在没有插件的情况下做这件事？

由于

Answer 1

您可以使用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'); }

}）;

试试

Answer 2

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');
});

Answer 3

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

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

Answer 4

问题解决了。我使用JqueryUI核心效果：

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

Answer 5

您可以使用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);

Answer 6

您可以使用jquery颜色插件，在缩小时仅使用1.7 KB

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

用jquery淡出背景颜色

6 个答案: